webpack 学习笔记
1.html-webpack-plugin
该插件可以帮助我们生成一个简单的html模板，常用的参数：
filename:生成的模板名称，例如index.html；
template：如果想使用自定义的html模块，可以通过该参数指定自定义的模板路径及文件名；
title: 用来生成页面的 title 元素；
inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中；
favicon: 添加特定的 favicon 路径到输出的 HTML 文件中；
minify: {} | false , 传递 html-minifier 选项给 minify 输出；
hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用；
cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件；
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中；
chunks: 允许只添加某些块 (比如，仅仅 unit test 块)；
chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'；
excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块) ；
主要作用是在release时，自动向index.html 文件中写入 <script>xx/xx/bundle.js</script>。
output: { path: __dirname + "/",//代表webpack 打包后的文件保存路径 filename: 'bundle.js', //打包文件的名称 publicPath: './' //打包后的bundle.js文件,在写入index.html中时，<script></script>中的路径，如 <script type="text/javascript" src="./bundle.js"></script> //如果publicPath:'./home',script的src 为 ./home/bundle.js } plugins: [ new HtmlWebpackPlugin({ filename: './index.html', //需要写入的文件路径及名称 template: './index.html', inject: "body", //注入到html的那个节点上 hash: true }) ]
2.resolve
a.extensions：自动补全模块后缀，如果require的时候没有写后缀名，会根据这里配置的参数去匹配查找；
b.alias：指定模块的别名，该功能优先执行。如果你想重新定向某个模块的引用路径，可以使用alias，改参数值是键值对，key指定模块名称，value为重定向模块的路径，例如：
alias:{
moment:path.join(__dirname,'/node_modules/moment/min/moment-with-locales.js')
}
这样，在js中使用require('moment')，将直接在path.join(__dirname,'/node_modules/moment/min/moment-with-locales.js') 下读取模块内容。
3.module的noParse
该参数值为数组，指定数组中值对应的模块不被webpack扫描；换句话说，如果你 确定一个模块中没有其它新的依赖 就可以配置这项， webpack 将不再扫描这个文件中的依赖。
4.webpack.DllPlugin 和 webpack.DllReferencePlugin 优化启动速度
原理：通过webpack.DllPlugin 预先将不会经常发生变动的js/或者第三方库打包成一个js文件，然后通过wepack.DllReferencePlugin 加载刚才打包好的js文件，这样加载js文件不需要再次编译，直接使用，大大提升了webpack启动的速度。
使用方法：
a.创建webpack.dll.config.js ，该文件与普通的webpack.config.js文件差不多，主要是将需要打包的库文件提取出来，简要code如下：
const webpack = require('webpack'), path = require('path'); // 设置需要打包的文件数组 const vendors = [ 'jquery', 'angular', 'lodash', 'angular-route', 'angular-ui-bootstrap', 'bootstrap', 'bootstrap-loader' ]; module.exports = { output: { filename: '[name].dll.js', path: path.resolve(__dirname, './app/assets/dll'), library: "[name]" }, entry: { vendor: vendors, }, module: { // loaders: [{ test: /\.json$/, loader: "json" }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015'] } }, { test: /\.scss$/, loader: 'style!css!postcss!sass', exclude: /node_modules/, }, { test: /\.html$/, loader: 'html-loader', exclude: /node_modules/ }, { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' }, { test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/, loader: 'file' } ] }, plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }), //核心配置，path知道打包后的文件存放位置，与output 位置一致 new webpack.DllPlugin({ path: path.resolve(__dirname, './app/assets/dll/[name]-manifest.json'), name: "[name]" }), //压缩打包文件 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ], };
b:在webpack.config.js 的plugin中引入打包好的js，路径与之前保持一致；
new webpack.DllReferencePlugin({ context: __dirname + "", manifest: require('./app/assets/dll/vendor-manifest.json') }),
c：在index.html 中通过script标签引入打包好的dll文件，如<script src="assets/dll/vendor.dll.js"></script>
注意事项：通过预打包的方式提升启动速度，这个方法效果非常好，一般能提升50%左右的速度，但是，在使用过程中，可能会遇到以下问题：
a:external 文件不存在，改问题主要是通过script 指定的文件不存在或者路径设置有问题，请检查路径配置是否正确；
b:如果路径配置正确，但是还是报错提示找不到，可能是webpack-server的启动路径设置不应，检查 content-base 后面的路径是否与预期一致
