webpack5升级笔记

我心飞翔 分类:javascript

前言

webpack5主要更新可以看这里webpack5发布.
主要问题在webpack5更新文档中都可以找到相应的解决方案.这里主要记录webpack4升级到webpack5过程中一些插件升级遇到的问题.

webpack热更新失效问题

主要是webpack5对target配置做了更细致的划分,并且默认值为 "browserslist", 如果在package.json中配置了browserslist会发生冲突,所以在webpack5中的dev配置中要给target配置值web,使热更新生效.

配置多入口后,热更新后页面不生效问题

这里需要在dev配置中添加具体配置如下:

module.exports = {
    ...,
    optimization: {
        runtimeChunk: 'single'
    },
    ...
}
 

主要原因可以看这里

webpack-merge调用方法更改

在最新版本的webpack-merge中的merge引用方法如下:

let{ merge } = require('webpack-merge')
 

旧版本直接引入即可

let merge = require('webpack-merge)
 

AddAssetHtmlWebpack 使用问题

在旧版本中,直接使用filepath就可以就文件自动添加到模板文件script中,在最新版本和webpack5中需要添加如下字段:

new AddAssetHtmlPlugin({
  filepath: path.resolve(__dirname, '../public/properties.js'),
  includeRelatedFiles: false,
  publicPath: '',
})
 

否则在模板文件script中文件路径会自动添加auto,主要问题可以在这里查看

loader插件引入方式更加严格

引入方法现在定义如下:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};
 

不再支持单独使用loader字段.

polyfills 支持

webpack5不再为 Node.js 模块 自动引用 Polyfills.如果引用的npm包引用了node模块,,需要手动引入,引入方法如下:

resolve: {
    fallback: {
        "crypto": require.resolve("crypto-browserify")
    }
}
 

回复

我来回复
  • 暂无回复内容