vue項目升級webpack4指南

所用vue-cli版本爲2.9.3, 非最新的3.0+版本, 包管理工具爲yarn

如今vue cli 3.x版本已經穩定, 推薦使用 @vue/cli 3.x版本

初始化項目

vue init webpack my-project
cd my-project
yarn install

腳手架項目webpack版本爲3.6.0

升級webpack等devdependencies

yarn upgrade webpack@4.6.0
yarn add webpack-dev-server webpack-cli -D

光升級這寫是不夠的, 此時運行項目會報一些奇奇怪怪的錯誤, 好比
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
查看錯誤信息上下文,

/workspace/my-project/node_modules/html-webpack-plugin/lib/compiler.js:81
        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

應該是相關插件版本不對, 好比這個錯誤就是html-webpack-plugin未升級版本致使

繼續升級相關plugin

須要升級的相關plugin以下:

html-webpakc-plugin
vue-loader

其餘未涉及的, 也儘量升級到新的版本.

修改webpack等相關配置文件

指定webpack.dev.conf.j和webpack.prod.conf.js 的mode 爲development和production, 不然會有警告信息⚠️
The 'mode' option has not been set, webpack will fallback to 'production' for this value.

此時項目已經能在dev-server下順利運行.
刪除多餘配置項: webpack.DefinePlugin已再也不須要, 在開發模式下, process.env.NODE_ENV 自動被設置爲'development', 生成模式下則是production
其餘環境變量推薦使用cross-env在命令裏設置, 若是須要也能夠保留.

cross-env cross-env NODE_ENV=test yarn test

其餘插件修改:
NoEmitOnErrorsPlugin 廢棄，使用optimization.noEmitOnErrors替代，在生產環境中默認開啓
ModuleConcatenationPlugin 廢棄，使用optimization.concatenateModules替代，在生產環境默認開啓該插件。
NamedModulesPlugin 廢棄，使用optimization.namedModules替代，在生產環境默認開啓。
uglifyjs-webpack-plugin升級到了v1.0版本, 默認開啓緩存和並行功能。
CommonsChunkPlugin 被刪除

在配置文件中刪除廢棄的插件, 至此, 開發模式改造完畢

生產模式改造

應爲CommonsChunkPlugin被刪除, 改成內置的api, 首先刪除webpack.prod.conf.js相關配置(CommonsChunkPlugin和UglifyJsPlugin), 新增項optimization,

optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: config.build.productionSourceMap,
        uglifyOptions: {
          warnings: false
        }
      }),
      new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    ],
    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
        }
      }
    }
  }

extract-text-webpack-plugin已再也不被推薦使用, webpack4 推薦使用新的插件mini-css-extract-plugin

yarn add mini-css-extract-plugin  -D

修改配置文件

// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

...
plugins: [
    ...
    // new ExtractTextPlugin({
    //   filename: utils.assetsPath('css/[name].[contenthash].css'),
    //   allChunks: true,
    // }),
    new MiniCssExtractPlugin({
      filename: 'css/app.[name].css',
      chunkFilename: 'css/app.[contenthash:12].css'  // use contenthash *
    }),
]

再修改build/utils文件中extract css的設置

// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
    if (options.extract) {
      // return ExtractTextPlugin.extract({
      //   use: loaders,
      //   fallback: 'vue-style-loader'
      // })
      // MiniCssExtractPlugin.loader,
      return [MiniCssExtractPlugin.loader].concat(loaders)
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

yarn build已經可以正常打包, 通過測試, 打包5萬行代碼的一個項目, webpack4比3快20s左右

通過修改的demo項目github地址
補充: 若是打包的時候出現

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.

在webpack中增長配置便可

performance: {
  hints: false
}

tips

新版的webpack devserver 若是不指定host, 只能經過localhost訪問, 經過ip不能訪問, 修改方法很簡單, 指明host爲 '0.0.0.0'就能夠

...
 host: '0.0.0.0', // can be overwritten by process.env.HOST
 port: 8080
...

問題

若是build或者dev時候出現, html-webpack-plugin報錯的狀況, 請升級該插件, 相關issue

yarn add html-webpack-plugin@next -D

若是報chunksSortMode相關的錯誤, 請刪除chunksSortMode: 'dependency'以後再嘗試build

仍是建議升級html-webpack-plugin@next