你的位置:首页 > Java教程

[Java教程]一、webpack那点事


前言:

还记得两年前刚来公司才几个月,经理就安排我去做JS地图相关的维护和开发工作,然后就跟着一个公司老鸟(没俩月他离职了)熟悉地图相关的功能。

本人嘛,那会前端JS实际开发经验也才几个月,然后当我看见公司地图的上万行源代码,可想而知,直接懵逼。但是没办法呀,只能坚持去慢慢看,来来回回的找引用关系,熟悉每个模块方法实现的功能,于是乎,从那之后,我感觉什么一两千行代码都是 so easy。

言归正传,正是在于这种情况下,在业务复杂的时候,相对应的代码量会很多,上万行的代码也不再是梦,但是这种情况下,在后期维护的过程中,是很不方便的,因此在最近尝试新版本的开发,采用webpack进行打包发布

 

webpack介绍:在开发过程中,我们可以利用模块化开发(CMD模式),将一个大型的功能按不同的小功能,拆分成不同的模块(文件),这样在以后的维护中,我们可以针对不同的功能进行维护,不至于在一个上万行的文件中,找来找去,而且当一个文件很大的时候,电脑不好的在查看,修改的时候会很卡,也不利于工作效率,因此产生了模块化开发这个概念;而webpack正是将模块化进行打包发布处理的一个工具

常见模块化开发规范:CMD(seaJS)  AMD(requireJS...)

一、webpack环境搭建1.webpack安装

首先需要安装nodeJS,先在nodeJS官网下载,进行NodeJS安装

下载地址   https://nodejs.org/en/download/

下载完毕后,进行安装,一切都以默认的选择即可

2.npm安装

安装完毕后,打开cmd工具,输入命令

npm install --save mocha

等待安装完毕

3.webpack安装

cmd工具中,输入命令 

npm install webpack -g

执行命令安装webpack

到此webpack安装完毕,可以使用

webpack -h

来查看版本号

到此,webpack安装完成

二、webpack打包

1. 打开cmd工具,进入你的开发文件夹,其中此文件夹必须包含webpack.config.js文件,config配置参考如下

var webpack = require("webpack")module.exports = {  entry: {    "mcDemoMain": "./mcDemoMain.js"//直接require进来的文件会直接打包到这个文件中,如require('./common/Enum'),延迟加载的文件则不会,如require("bundle?lazy&name=demo!./demo/demo1")  },  output: {    path: "../../dist/demo/1.0",//设置打包后的js的输出位置    filename: "[name].js",//和入口文件的名字相同    chunkFilename: "[name].young.js",//值模块里需要单独打包的文件 require.ensure    //path: path.join(__dirname, 'static/js/app/dist'), //设置打包后的js的输出位置    //filename: "[name].[hash].js", //和入口文件的名字相同    publicPath: "[sDomain]static/dist/demo/1.0/" //浏览器会从这个目录开始查找模块  },  module: {    loaders: [     //{ test: /\.css$/, loader: "style!css" },     //{ test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: 'es2015' } },    ]  },  plugins: [    new webpack.BannerPlugin('文件顶部注释说明'),    // new webpack.IgnorePlugin(/\.\/AsnyModuleA.js$/),//排除不想打包进去的插件    //new webpack.ProvidePlugin({ //这是把jquery挂到全局上,不用每个模块都去require    //  "AsnyModuleA": '../../../dist/demo/AsnyModuleA.js',    //}),    //new webpack.optimize.CommonsChunkPlugin('common.js') //有多个入口文件的话提取公共部分,利用浏览器缓存 然后 commonsPlugin 可以用于分析模块的共用代码, 单独打一个包出来:  ]  , resolve: {    //modulesDirectories: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules',//["C:\Users\Administrator\AppData\Roaming\npm\node_modules"],    //root: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules',    alias: {      //jquery: path.join(__dirname, 'dev/jquery/jquery.js'),      //AsnyModuleA: "../../../dist/demo/start/commom/AsnyModuleA.js", //在正常情况下我们以CommonJS风格引用avalon,以require('avalon')      //'../avalon': path.join(__dirname, 'dev/avalon/avalon.js')//由于oniui都以是../avalon来引用avalon的,需要在这里进行别名    }  },  //externals: {  //  'AsnyModuleA': 'AsnyModuleA'  //}}

2.cmd进入开发目录后,输入

webpack

就可以进行打包了,如果显示以下则表示成功

 

注明:

sDomain为动态URL路径地址,下次更新sDomain动态路径配置的问题


【原创文章,转载请尊重原作者】