Webpack 常用插件总结

讲讲webpack常用的几个插件:

1、uglifyjs-webpack-plugin

作用：压缩混淆js文件

用法配置：

plugins: [		
    new UglifyJsPlugin({
        uglifyOptions: {           // 压缩配置
	        output: {              // 输出
	            comments: false,   // 是否保留注释
	            beautify: false,   // 是否美观
	        },
	        warnings: false,       // 是否显示提醒    
		},
	    cache: true,
	    sourceMap: true                     // 默认是false，不开启map
    })
]

2、DllPlugin

作用：  dll 全称是：dynamic link library（动态链接库），dll方式是通过配置告诉webpack指定库在项目中的位置，build构建的时候不将其打包在模块内，使用时直接引用。需要配置DllReferencePlugin 插件一起使用。

用法配置：

module.exports = {
    entry: {
        'vendor': ['a', 'b', 'c', 'd'],  // verdor 所包含的资源       
    },
    output: {
        path: resolve('../../htdocs/res/vendor'),  // 指定输出的模块vendor路径
        filename: '[name].bundle.js',
        library: '[name]_bundle'
    },
    resolve: {       
        extensions: ['.js', '.vue'],
        alias: {                               // 指定项目别名
            'vue$': 'vue/dist/vue.min.js',
            'vue-resource': 'vue-resource/dist/vue-resource.min.js',
            'vue-awesome-swiper': 'vue-awesome-swiper/dist/vue-awesome-swiper.min.js',
            'promise': 'promise-polyfill/promise.min.js',
            'a': resolve('a'),	   
            'b': resolve('b'),            
        }
    },
    plugins: [
        new webpack.DllPlugin({
            path: 'manifest.json',     // 将manifest.json输出到config目录下 
            name: '[name]_bundle',
            context: __dirname
        }),      
    ]
};

 

 

注：配置中entry 指定输出模块vendor包括的模块a，b，c，d。在plugins中使用new webpack.DllPlugin插件，path 指定输出的映射文件manifest.json。

 其中， webpack.DllPlugin选项：

    path：manifest.json文件的输出路径，这个文件会用于后续的业务代码打包；  

    name：dll暴露的对象名，要跟output.library保持一致;

    context：解析包路径的上下文，这个要跟接下来配置的 webpack.config.js 一致。

 

3、DllReferencePlugin

作用：在 webpack 主配置文件中设置的， 这个插件把只有 DllPlugin生成的vendor引用到需要的预编译的模块中。

用法配置：

webpack.config.js中的配置修改

module.exports = {
  output: {
    path: 'build',
    filename: '[name].[chunkhash].js',
  },
  entry: {
    app: './src/index.js',
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./manifest.json'), // 引用DllPlugin生成的映射文件
    }),
  ],
};

webpack.DllReferencePlugin的选项中：
    context：需要跟之前保持一致，这个用来指导webpack匹配manifest.json中库的路径；
    manifest：用来引入预编译输出的manifest.json文件。

 

4、html-webpack-plugin

作用：根据一个简单的index.html模板，生成一个自动引用打包后的JS文件的新index.html目标文件。

用法配置：

let conf = {
    // 模板来源
    template: templatePath,
    // 文件名称
    filename: fileName,
    // 页面模板自动注入common/global_error ，common/global，以及业务JS模块脚本
    chunks: [chunksGlobalError,chunksGlobal, chunksName],
    inject: true,
    chunksSortMode: 'manual'
}      
if (env == 'production') {   // 生产模式  
    conf = merge(conf, {
        minify: {                     //  对生成目标html 文件进行压缩选项
            removeComments: true,     //  是否删除注释
            collapseWhitespace: true, // 是否删除空白区域
            minifyCSS: true,          // 是否压缩css
            minifyJS: true,
        },
        chunksSortMode: 'dependency' //  script 标签的引用顺序
    })
}
new HtmlWebpackPlugin(conf)

注：

chunksSortMode，当模块中引入多个chunk模块时，指定引入chunk填写顺序。包含：'none' | 'auto' | 'dependency' | 'manual' | {Function}几种情况。

A) manual，将chunks按引入的顺序排序

B) dependency，chunks按依赖的顺序排序

C) auto，自动排序，无序。

 

5、webpack-bundle-analyzer

作用： 分析打包后的bundle体积大小以及组成情况。

用法配置：

new BundleAnalyzerPlugin({
	analyzerHost: 'localhost',      //指定HTTP服务器
	analyzerPort: 3002,              // 指定端口
})

自动生成类似视图：

 

6、HashedModuleIdsPlugin

作用：根据模块的相对路径生成一个四位数的hash作为模块id, 建议用于生产环境

new webpack.HashedModuleIdsPlugin({
  hashFunction: 'sha256',   // 散列算法，默认为 'md4'。
  hashDigest: 'hex',        // 在生成 hash 时使用的编码方式，默认为 'base64'
  hashDigestLength: 20      // 散列摘要的前缀长度，默认为 4。
})	

 

7.CommonsChunkPlugin(webpack 4.X 已废弃)

作用： 提取重复代码

用法配置：

new webpack.optimize.CommonsChunkPlugin({ name: 'common' })// 指定公共 bundle 的名称

上面即将所有入口节点的公共代码提取出来, 生成一个common.js。

 new webpack.optimize.CommonsChunkPlugin('common.js',['entry1','entry2']);

 //指定文件entry1, entry2共用部分模块, 生成一个common.js

 //提取所有node_modules中的模块至vendors中

      new webpack.optimize.CommonsChunkPlugin({
          name: 'vendors',
          minChunks: function (module, count) {
           return (
              module.resource && /\.js$/.test(module.resource) &&
              module.resource.indexOf(path.join(__dirname, '../node_modules') ) === 0
           )
          }

       });
     //entry名叫为vendors，并把vendors设置为所需要的资源库，CommonsChunk会自动提取指定库至manifest中。
     entry = {
         vendors: ['fetch', 'loadash']
     };
      new webpack.optimize.CommonsChunkPlugin({
         name: 'manifest',
         chunks: ['vendor']
      })

 

参考资料：

webpack plugins 官网

html-webpack-plugin用法全解