webpack4升級徹底指南

webpack4官方已經於近日升級到了V4.5的穩定版本，對應的一些必備插件(webpack-contrib)也陸續完成了更新支持，筆者在第一時間完成了項目由V3到V4的遷移，在此記錄一下升級過程當中遇到的種種問題和對應的解決手段，方便後續入坑者及時查閱，減小重複工做，若是以爲本篇文章對你有幫助，歡迎點贊😁

1、Node版本依賴從新調整

官方再也不支持node4如下的版本，依賴node的環境版本>=6.11.5，固然考慮到最佳的es6特性實現，建議node版本能夠升級到V8.9.4或以上版本，具體更新說明部分能夠見：webpack4更新日誌

"engines": {
    "node": ">=6.11.5" // >=8.9.4 (recommendation version) 
  },

2、用更加快捷的mode模式來優化配置文件

webpack4中提供的mode有兩個值：development和production，默認值是 production。mode是咱們爲減少生產環境構建體積以及節約開發環境的構建時間提供的一種優化方案，提供對應的構建參數項的默認開啓或關閉，下降配置成本。

開啓方式 1：直接在啓動命令後加入參數

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

開啓方式 2：能夠在配置文件中加入一個mode屬性：

module.exports = {
  mode: 'production' // development
};

development模式下，將側重於功能調試和優化開發體驗，包含以下內容：

1. 瀏覽器調試工具
2. 開發階段的詳細錯誤日誌和提示
3. 快速和優化的增量構建機制

production模式下，將側重於模塊體積優化和線上部署，包含以下內容：

1. 開啓全部的優化代碼
2. 更小的bundle大小
3. 去除掉只在開發階段運行的代碼
4. Scope hoisting和Tree-shaking
5. 自動啓用uglifyjs對代碼進行壓縮

webpack一直以來最飽受詬病的就是其配置門檻極高，配置內容複雜而繁瑣，容易讓人從入門到放棄，而它的後起之秀如rollup，parcel等均在配置流程上作了極大的優化，作到開箱即用，webpack在V4中應該也從中借鑑了很多經驗來提高自身的配置效率，詳見內容能夠參考這篇文章《webpack 4: mode and optimization》

3、再見commonchunk，你好optimization

從webpack4開始官方移除了commonchunk插件，改用了optimization屬性進行更加靈活的配置，這也應該是從V3升級到V4的代碼修改過程當中最爲複雜的一部分，下面的代碼便是optimize.splitChunks 中的一些配置參考，

module.exports = {
  optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: true, // [new UglifyJsPlugin({...})]
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  }
}

從中咱們不難發現，其主要變化有以下幾個方面：

1. commonchunk配置項被完全去掉，以前須要經過配置兩次new webpack.optimize.CommonsChunkPlugin來分別獲取vendor和manifest的通用chunk方式已經作了整合， 直接在optimization中配置runtimeChunk和splitChunks便可 ，提取功能也更爲強大，具體配置見：splitChunks
2. runtimeChunk能夠配置成true，single或者對象，用自動計算當前構建的一些基礎chunk信息，相似以前版本中的manifest信息獲取方式。
3. webpack.optimize.UglifyJsPlugin如今也不須要了，只須要使用optimization.minimize爲true就行，production mode下面自動爲true，固然若是想使用第三方的壓縮插件也能夠在optimization.minimizer的數組列表中進行配置

4、ExtractTextWebpackPlugin調整，建議選用新的CSS文件提取插件mini-css-extract-plugin

因爲webpack4之後對css模塊支持的逐步完善和commonchunk插件的移除，在處理css文件提取的計算方式上也作了些調整，以前咱們首選使用的extract-text-webpack-plugin也完成了其歷史使命，將讓位於mini-css-extract-plugin

基本配置以下：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // replace ExtractTextPlugin.extract({..})
          "css-loader"
        ]
      }
    ]
  }
}

生產環境下的配置優化：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true 
      }),
      new OptimizeCSSAssetsPlugin({})  // use OptimizeCSSAssetsPlugin
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/app.[name].css',
      chunkFilename: 'css/app.[contenthash:12].css'  // use contenthash *
    })
  ]
  ....
}

將多個css chunk合併成一個css文件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {            
          name: 'styles',
          test: /\.scss|css$/,
          chunks: 'all',    // merge all the css chunk to one file
          enforce: true
        }
      }
    }
  }
}

5、其餘調整項備忘

1. NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors（默認狀況下處於生產模式）
2. ModuleConcatenationPlugin- > optimization.concatenateModules（默認狀況下處於生產模式）
3. NamedModulesPlugin- > optimization.namedModules（在開發模式下默認開啓）
4. webpack命令優化 -> 發佈了獨立的 webpack-cli 命令行工具包
5. webpack-dev-server -> 建議升級到最新版本
6. html-webpack-plugin -> 建議升級到的最新版本
7. file-loader -> 建議升級到最新版本
8. url-loader -> 建議升級到最新版本

6、參考工程

webpack4配置工程實例

7、參閱資料

1. webpack4
2. webpack4發佈概覽
3. webpack 4: mode and optimization
4. webpack4新特性介紹
5. webpack4升級指北
6. webpack4升級指南以及從webpack3.x遷移