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

Webpack Vue · 發表 2019-04-28 11:21:48

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

前段時間，泡麵將自己的一個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

完！碎覺~