vue项目从webpack3 升级webpack4

 

 

错误1：TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

因：是html-webpack-plugin·版本不兼容问题

"webpack":"^4.0.0",
"html-webpack-plugin":"^2.30.1"
//会出现不兼容问题
解决方案：升级到最新版

npm i –save-dev html-webpack-plugin@next 
yarn add –dev html-webpack-plugin@next 

问题二 

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

更新 eslint-loader  cnpm i --save-dev eslint-loader@latest

问题三

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

更新 eslint-loader  cnpm i --save-dev vue-loader@latest

问题四

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

场景
. webpack2.4.*集成vue-loader@15.2.4报错
1
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

分析
. 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,
1
2
解决
. 在webpack.config.js中加入
1
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    devtool: "sourcemap",
    entry: './js/entry.js', // 入口文件
    output: {
        filename: 'bundle.js' // 打包出来的wenjian
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module : {
    ...
}
}

问题5  (node:5916) [ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning: The 'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use 'parserOptions.ecmaVersion' instead. (found in "standard")

更新 eslint-plugin-standard  cnpm i --save-dev eslint-plugin-standard@latest

问题6 

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.

方式一  webpack中添加如下配置
performance: {
 
hints:false   
 
}
方式二 webpack中添加如下配置
performance: {
    hints: "warning", // 枚举
    maxAssetSize: 30000000, // 整数类型（以字节为单位）
    maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) {
    // 提供资源文件名的断言函数
    return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    
    }
},
WebPack 警告WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).解决

module.exports = {
  //...
  performance: {
    hints: false
  }
};

 问题7  babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7' 

总结:

两种解决方案:

1. 回退低版本

npm install -D babel-loader@7 babel-core babel-preset-env

1. 更新到最高版本:

npm install -D babel-loader @babel/core @babel/preset-env webpack

问题8 TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (C:\opt\new_autoChart\node_modules\_@babel_traverse@7.2.3@@babel\traverse\lib\scope\index.js:867:13)

In your .babelrc file, change

{ "presets": ["env"] } 

to 

{ "presets": ["@babel/preset-env"] }

 

问题9  Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

注释下面一段代码

 

new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false

},

sourceMap: process.env.NODE_ENV !== 'dev'

}),

问题10 webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

添加

module.exports = {
  optimization: {
    minimize: env === 'production' ? true : false, //是否进行代码压缩
    splitChunks: {
      chunks: "async",
      minSize: 30000, //模块大于30k会被抽离到公共模块
      minChunks: 1, //模块出现1次就会被抽离到公共模块
      maxAsyncRequests: 5, //异步模块，一次最多只能被加载5个
      maxInitialRequests: 3, //入口模块最多只能加载3个
      name: true,
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20
          reuseExistingChunk: true,
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    },
    runtimeChunk {
      name: "runtime"
    }
  }
}

问题11 (node:32000) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/ building for prod...Unhandled rejection Error: "dependency" is not a valid chunk sort mode
    at HtmlWebpackPlugin.sortEntryChunks (C:\opt\new_autoChart\node_modules\_html-webpack-plugin@4.0.0-beta.5@html-webpack-plugin\index.js:488:11)

然后看看html-webpack-plugin，将这个插件升级到最新版本，一般情况没啥问题，但是有个坑，最好是把chunksSortMode这个选项设置为none。

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins:[
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      hash: true,
      chunksSortMode: 'none' //如果使用webpack4将该配置项设置为'none'
    })
  ]
}