webpack3升级webpack4记录

·  阅读 1894

卸载和重装

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配置

  1. Plugin/Preset files are not allowed to export objects, only functions. In D:\cms\nodejs\node_modules\babel-preset-stage-2\lib\index.js
  2. this.setDynamic is not a function (babel-plugin-transform-runtime)
  3. 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的可选值为developmentproductionnone

module.exports = {
    mode: "development",
    // ...
}
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改