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.
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容