Vue專案從webpack3.x升級webpack4不完全指南

Vicco W.發表於2019-04-28
VueWeb

前段時間，泡麵將自己的一個Vue-cli構建的前端框架從webpack3.x升級到了4.x版本，現在才拉出來記錄一下，已備忘之用，也和大家分享一下，以免大家採坑。

原先的環境

  • 專案原先通過Vue-cli 2.9.3 版本構建，
  • 原先使用的webpack 3.x版本

首先需要對基礎包進行更新(package.json)

  • webpack 更新到4.x版本，泡麵這裡更新到了4.28.3
  • 更新webpack-dev-server，泡麵更新到了3.1.14版本,
  • 安裝webpack-cli，泡麵安裝的是3.2.1版本

除了上面的這幾個，還需要更新下面幾個：

  • vue-loader 泡麵直接升級到了15版本，
  • eslint-loader 升級到了1.7.1,這個當時在做啟動的時候提示了一些錯誤,所以索性也就升級了.
  • happypack, 泡麵使用了多執行緒加速,所以這個也必須要升級,否則會報錯,泡麵更新到了5.0.1
  • html-webpack-plugin, 這個也需要更新,否則會提示錯誤,泡麵這裡升級到了3.2.0

除了上面幾個,還需要額外下載一個:

  • mini-css-extract-plugin, 該包是要替換掉extract-text-webpack-plugin來使用,所以後者就遺棄掉了.

接著我們修改一下webpack.base.conf.js,沒有使用happypack的這步驟可略過...

泡麵這裡不知道為什麼不能使用happypack來掛載vue-loader,否則會提示錯誤,所以泡麵這裡將原先的happypack的配置修改回了原先:

...
const vueLoaderConfig = require('./vue-loader.conf')
...
module.exports = {
  ...
    {
      test: /\.vue$/,
        // loader: 'happypack/loader?id=happy-vue'
        loader: 'vue-loader',
        options: vueLoaderConfig
    },
  ...  
}
複製程式碼

接著來調整 webpack.dev.conf.js

首先在合併配置的地方引入mode

  ...
  // 開發環境引入
  mode: 'development',
  ...
  module: {
    ...
  }
  devServer: {
    ...
  }
複製程式碼

webpack4需要手動引入vue-loader外掛,因為泡麵是從14版本升級到15版本,點我檢視官方文件,如何從 v14 遷移,所以這裡需要引入:

...
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
module.export = {
  ...
  plugins: [
    ...
    // 引入vue-loader外掛
    new VueLoaderPlugin(),
    ...
    // 同時,泡麵註釋掉了vue-loader的happypack
    // new Happypack({
    //   id: 'happy-vue',
    //   loaders: [{
    //     loader: 'vue-loader',
    //     options: vueLoaderConfig
    //   }]
    // })
  ]
}
複製程式碼

接著, 以下外掛被廢棄掉了,直接註釋掉

  • webpack.DefinePlugin
  • webpack.NamedModulesPlugin
  • webpack.NoEmitOnErrorsPlugin

ok, 這個檔案就改完了.

接著來修改webpack.prod.conf.js

同開發環境,需要引入mode和vue-loader,一模一樣,所以這裡不贅述了. 接著,我們需要在配置表裡新增optimization選項:

...
output: { ...},
// 這裡新增
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
        }
      }
    }
  },
  plugins: [...]  
複製程式碼

接著,我們需要引入mini-css-extract-plugin外掛,並新增到外掛裡:

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: [
  ...
  new MiniCssExtractPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css')
  }),
  ...  
]
複製程式碼

然後, 我們需要把廢棄掉的外掛註釋掉:

  • webpack.DefinePlugin
  • UglifyJsPlugin (放到optimization裡了)
  • ExtractTextPlugin
  • OptimizeCSSPlugin (放到optimization裡了)
  • CommonsChunkPlugin (所有的...)

ok, 至此該檔案就調整完了.

最後一個utils.js

這裡主要是需要新增mini-css-extract-plugin外掛

...
// 註釋掉原來的外掛
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
// 找到:
// return ExtractTextPlugin.extract({
//   use: loaders,
//   fallback: "vue-style-loader",
//   publicPath: '../../'
// });
// 改為:
return [MiniCssExtractPlugin.loader].concat(loaders)
複製程式碼

ok, 大功告成! 至此webpack4的配置檔案就全部修改完成了.

目前, 泡麵至在此記錄流水賬,回頭效能測試再發文章記錄.

ps: 如果出現這種錯誤

error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
複製程式碼

請重新安裝一下 vue-template-compiler

完！碎覺~

文章參考:

相關文章