Vue項目從webpack3.x升級webpack4不完全指南

2019-11-19 11:41:23

字體：大中小

來源：轉載

供稿：網友

前段時間，泡面將自己的一個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.DefinePluginUglifyJsPlugin (放到optimization里了)ExtractTextPluginOptimizeCSSPlugin (放到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: 如果出現這種錯誤