Webpack 常用插件总结

34 篇文章 0 订阅
2 篇文章 0 订阅

讲讲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用法全解

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值