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 后面的路径是否与预期一致