vue項目升級踩坑

本項目中用的都是3年前的插件，須要進行升級，考慮到開發成本，目前只考慮升級主要配置

webpack：3.6升級到4.43

報錯信息：Error: Cannot find module 'webpack/bin/config-yargs'

緣由

是webpack中的config-yargs.js被移到webpack-cli中,須要安裝webpack-cli,還須要升級webpack-dev-server

html-webpack-plugin

報錯信息：

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function at /Users/yangxiaomei/Desktop/projects/laas-webapp/node_modules/html-webpack-plugin/lib/compiler.js:81:51

緣由

html-webpack-plugin版本不對，進行升級，原來版本：2.30.1 升級後：4.2.0

vue-loader

報錯信息：

Module build failed(from ./node_modules/vue-loader/index.js) TypeError: Cannot read property 'vue' of undefined

緣由

vue-loader原來版本爲13.3.0 升級後：15.9.1

vue-loader在15.*以後的版本，須要配合vue-loader中的plugin的使用

const VueLoaderPlugin = require('vue-loader/lib/plugin')
modules:{
rules:[
{
test:/\.vue$/,
loader:’vue-loader’
}
]
},
plugins:[
new VueLoaderPlugin()
]
複製代碼

babel-loader

報錯信息

• ./node_modules/babel-loader/lib/index.js You may need an additional loader to handler the result of these loaders

緣由

• babel-loader不支持，須要進行升級
• babel-loader:原來版本：7.1.1, 升級後：7.1.5
• 安裝：npm install --save-dev babel-loader @babel/core @babel/preset-env
• 配置：

module: {
    rules: [ 
        {
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
        } 
    ] 
}
複製代碼

• 根目錄建立.babelrc配置文件，並進行配置

{
    "presets": ["@babel/preset-env"]
}
複製代碼

babel-core報錯

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-core' Require stack:

緣由

babel-core:原來版本6.22.1 升級後最新版是6.26.3，但跟最新版本的babel-loader配合使用須要用7以上的版本，目前安裝的爲7.0.0-bridge.0

babel-preset-stage-2從 Babel v7 開始，全部針對處於標準提案階段的功能所編寫的預設（stage preset）都已被棄用

卸載:npm uninstall babel-preset-stage-2
安裝新版：npm install --save-dev @babel/preset-stage-2
複製代碼

babel-stage-presets報錯

Error: [BABEL] /Users/src/main.js: As of v7.0.0-beta.55, we've removed Babel's Stage presets. Please consider reading our blog post on this decision at babeljs.io/blog/2018/0… for more details. TL;DR is that it's more beneficial in the long run to explicitly add which proposals to use.

緣由

7.0以上的版本不須要stage須要卸載，npm uninstall @babel/preset-stage-2

babel-plugin-transform-runtime報錯

緣由

須要對babel-plugin-transform-runtime進行升級 babel-plugin-transform-runtime：原來版本6.22.0
升級爲@babel/plugin-transform-runtime:7.9.0

postcss-loader

報錯

Module Warning (from ./node_modules/postcss-loader/lib/index.js): (Emitted value instead of an instance of Error) autoprefixer:

緣由

• display:flex是2012年的語法也是之後的標準語法
• display:box是2009年的語法，已過期，須要加前綴
• 解決辦法：將display:box替換爲display:flex

CommonsChunkPlugin

報錯

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

緣由

• webpack4之後移除webpack.optimize.CommonsChunkPlugin
• 修改辦法：用optimization.splitChunks來代替webpack.optimize.CommonsChunkPlugin

//默認配置splitChunks
optimization: {
    splitChunks: {
    chunks: 'async',//能夠使用’all’：異步和非異步的進行拆分
    minSize: 30000,
    minRemainingSize: 0,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 6,
    maxInitialRequests: 4,
    automaticNameDelimiter: '~',
    cacheGroups: {
    defaultVendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10
    },
    default: {
    minChunks: 2,
    priority: -20,
    reuseExistingChunk: true
    }
    }
    }
}
複製代碼

extract-text-webpack-plugin

報錯

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

緣由

webpack4之後extract-text-webpack-plugin將不能被使用到css,因此須要用mini-css-extract-plugin來代替

//npm uninstall extract-text-webpack-plugin
//npm i mini-css-extract-plugin -D
//增長配置：
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
    })
],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};
複製代碼