一、webpack那点事-安装、环境搭建

hao1nan

　　前言：
　　还记得两年前刚来公司才几个月，经理就安排我去做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动态路径配置的问题

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