webpack3升级webpack4记录Plugin could not be registered at 'html-

卸载和重装

npm uninstall webpack webpack-dev-server webpack-merge -D
npm i webpack webpack-dev-server webpack-merge webpack-cli -D

错误一：CommonsChunkPlugin

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

原因：webpack4不再支持CommonChunk插件

解决：改为splitchunk

optimization: {
	splitChunks: {
		chunks: "all"
	}
}

错误二：babel

TypeError: Cannot read property 'babel' of undefined

原因：webpack4需要新版本的babel-loader支持

解决：更新babel各个依赖包

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

错误三：happypack

Cannot read property 'length' of undefined

原因：happypack没有升级到最新版本

解决：更新happypack的版本

npm uninstall happypack
npm install happypack -D

错误四：html-webpack-plugin

Plugin could not be registered at 'html-webpack-plugin-before-html-generation'. Hook was not found.

原因：插件没有升级到最新版本，以及webpack4要求插件的先后顺序

解决：更新+调整顺序

npm uninstall html-webpack-plugin
npm install html-webpack-plugin -D
npm uninstall add-asset-html-webpack-plugin
npm install add-asset-html-webpack-plugin -D

把AddAssetHtmlPlugin放在HtmlWebpackPlugin后面，由于是多页面应用，HtmlWebpackPlugin也写在plugins.push中，在这部分操作的后面添加以下：

plugins.push(new AddAssetHtmlPlugin([{
	// 一些配置
}]))

更新旧的api compiler.plugin()改为compiler.hooks.emit.tap()

错误五：babel配置

Plugin/Preset files are not allowed to export objects, only functions. In D:\cms\nodejs\node_modules\babel-preset-stage-2\lib\index.js
this.setDynamic is not a function （babel-plugin-transform-runtime）
Cannot read property 'bindings' of null （babel-loader）

解决:

更新相关依赖包

npm uninstall @babel/plugin-transform-runtime
npm install -D @babel/plugin-transform-runtime
npm install -D @babel/runtime

修改.babelrc配置文件为

{
	"presets": [
		"@babel/preset-env"
	],
	  "plugins": [ "@babel/plugin-transform-runtime"]
}

错误六：外部依赖包报babel的错

TypeError: Cannot read property 'babel' of undefined

解决：更新vue-loader

注意1: vue-loader要引入vueloaderplugin，否则会报错

在webpack.config.js的头部引入插件：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

在导出的配置中添加插件

module.export = {
	...//之前配置
	plugins: [
		new VueLoaderPlugin()
	]
}

注意2：vue-loader不能再happypack中用，所以.vue文件的配置还原回vue-loader

{
	test: /\.vue$\,
	use: 'vue-loader'
}

错误七：uglifyjs

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

解决：更新UglifyJsPlugin并且修改配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        parallel: true, // 开启并行压缩
        sourceMap: false,
        uglifyOptions: {
          compress: {
            unused: true,
            warnings: false,
            drop_debugger: true
          }
        }
      }),
    ],
  }

错误八： ExtractTextWebpackPlugin

Error: Path variable [contenthash] not implemented in this context: style/[name].[contenthash].css

修改以下的contenthash位hash

new ExtractTextWebpackPlugin({
    filename: 'style/[name].[contenthash].css'
})

或者不用这个插件，改为https://github.com/webpack-contrib/mini-css-extract-plugin

plugins: [
 new MiniCssExtractPlugin({
    filename: 'css/[name].[contenthash:7].css'
 })
]

warning1：asset size

打包过程中如果文件大小超过限制的250kb，会提醒超过size WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance.

可以避免这样的提醒，设置performance

const config = {
    performance: {
        hints: "warning",
        maxEntrypointSize: 5000000,
        maxAssetSize: 3000000
    }
}

warning2: mode

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: webpack.js.org/concepts/mo…

webpack4需要配置mode才能使用一些相关配置，mode的可选值为development、production和none

module.exports = {
    mode: "development",
    // ...
}