webpack 内置插件

一. webpack.optimize.UglifyJsPlugin

用途:压缩代码

1. 自动方式:

在命令行中指定 --optimize-minimiz。或者运行webpack -p (也可以运行 webpack --optimize-minimize --define process.env.NODE_ENV="'production'",他们是等效的,会打包注释、空格))

2. plugins中配置
new webpack.optimize.UglifyJsPlugin({
  sourceMap:  //是否生成map文件,default true
  compress: {
    warnings: false,//压缩警告
    drop_debugger: true, //输出文件不debugger
    drop_console: true, //输出文件不console
  }
}),

参考

2. webpack.optimize.CommonsChunkPlugin

用途:提取第三方库

entry: {
  babelpolyfill: "babel-polyfill",
  main: "./src/main.js",
  vendors: ['vue', 'vue-router']// 可省略
},
//或
entry: {
  main: ["babel-polyfill", "./src/main.js"],
  vendors: ['vue', 'vue-router']
},
//第一种方式将输出3个js文件,第二种方式只会输出两个,main.js 和 vendors.js
new webpack.optimize.CommonsChunkPlugin({
  name: "vendors",//(the commons chunk name)公共代码块js文件名
  filename: "vendors.js",// (the filename of the commons chunk)可忽略
  minChunks: // 
  chunks: // 
}),

更多👇👇👇
可参考的例子
CommonsChunkPlugin提取公共代码的3种方式

3. DefinePlugin

用途:创建一个全局变量

4.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容