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'],
      },
    ],
  },
};