Vue項目從webpack3.x升級webpack4不徹底指南

前段時間，泡麪將本身的一個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

完！碎覺~

---

文章參考:

• vue項目升級webpack4指南
• Vue-loader從14遷移