第一部分讲Webpack的安装，以及配置文件的入口、devtool、输出、解析。本篇接着说说配置文件的模块。想看第一篇的朋友可以点这里。module（官方文档）module:{rules:[{test:/\.js$/,loader:'babel-loader'},{test:/\.(png|jpg|gif|svg)$/,loader:'file-loader',options:{name:'[name].[ext]?[hash]'}}]}module:受影响模块的选项。我个人的理解是，待打包的模块会因为其配置而发生一些可控的变化。常见的就是里面的规则，主要是这部分。rules：顾名思义，如何设置规则？看到有测试和正则表达式，那么需要对要打包的模块进行匹配。匹配有什么作用？匹配的模块会根据Loader的规则变化。Loader：通过使用不同的loader，webpack有能力调用外部脚本或工具来处理不同格式的文件，例如分析和转换scss到css，或者将下一代JS文件（ES6、ES7）转换为现代浏览器兼容JS文件。babel-loader（官网地址）是一个js编译器，可以将es6+转es5运行在现有浏览器中。很强大，可以看阮一峰老师的babel教学，到时候我会写一篇详细的babel使用文章。{test:/\.js$/,loader:'babel-loader',exclude:/node_modules/}每条规则都有一个test:正则表达式，上图是匹配.js。exclude：该规则不包含哪个模块的意思，取值可以是正则表达式，也可以是包含路径的字符串数组。不管是否包含，当然还有包含（include）。Babel有自己的配置文件.babelrc。如果测试匹配，将执行配置文件(.babelrc)中的规则。//.babelrc的内容。{"presets":[//设置转码规则"env","stage-2""stage-3"],"plugins":["transform-runtime"]}preset只是编译语法，新的API可能无法编译，此时需要插件。env：包含es2015、es2016、es2017的转码规则npminstallbabel-preset-env--save-devstage-2：es7第二版的转码规则npminstallbabel-preset-stage-2--save-devstage-3：es7第三版的转码规则npminstallbabel-preset-stage-2--save-devbabel-polyfill虽然支持了一些新的API编译，但是还是有不支持的API，所以plugins提供了一个辅助功能，transform-运行时就是其中之一。css-loader和style-loadercss-loader：require、import、@import常用来导入css，然后用css-loader进行转换。（官方文档）style-loader：通过注入
