构建webpack5.x 知识体系：6、升级5.x遇到坑总结
本篇主要是webpack4.x升级到5.x会遇到的坑的总结~~其实在前面系列的分享中，都分享到过，在此篇呢，主要总结一下，对于如果是项目中遇到问题了，哎，直接来着查查看，是什么问题就知道怎么改了~
\
\
正式开始：
预备技能
基本nodejs知识和npm指令
注意：版本问题导致不同，本系列实战中用到的webpack版本是："webpack": "^5.68.0","webpack-cli": "^4.9.2",
\
1、资源模块
Webpack 5现在已经对表示资源的模块提供了内置支持。这些模块可以向输出文件夹发送一个文件，或者向javascript包注入一个DataURI。无需配置额外 loader。
如，在前边篇幅中写道的，图片资源、字体、图标等
\
raw-loader=>asset/source导出资源的源代码file-loader=>asset/resource发送一个单独的文件并导出 URLurl-loader=>asset/inline导出一个资源的 data URI- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用
url-loader，并且配置资源体积限制实现
\
{
// 处理图片
// 问题：默认处理不了html中img图片
test: /.(jpe?g|png|gif|svg)$/,
type: "asset",
// //解析
parser: {
//转base64的条件
dataUrlCondition: {
maxSize: 12 * 1024, // 12kb
}
},
generator: {
filename: 'imgs/[name].[hash:6][ext]',
// publicPath: './'
},
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
\
想继续使相关资源loader， 我们可以再原来的基础上添加
// ！！！！！！注意这个坑，webpack5的问题，旧assets loader（比如raw-loader 、url-loader、file-loader） 已经弃用，需要添加这个配置
type: 'javascript/auto',
不这么配置我们虽然编译不出差，但是打包后在浏览器找不到这些资源~
但是不建议，这样打包了这些loader，并不利于优化~~
\
2、启动命令
之前我们在
npm scripts配置启动本地的devserver命令由webpack-dev-server 改为了 webpack serve
\
3、 不支持babel-polyfill
全部兼容性处理，之前webpack4时我们使用babel-polyfill，但是在webpack5中改用@babel/runtime-corejs3和@babel/plugin-transform-runtime
\
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}]
]
}
}
},
\
4、optimize-css-assets-webpack-plugin 使用错误
webpack5不在使用optimize-css-assets-webpack-plugin。 这是因为optimize-css-assets-webpack-plugin 在webpack5中已不在友好支持。
这个时候要改为使用插件：css-minimizer-webpack-plugin
optimization: {
minimizer: [
new CssMinimizerWebpackPlugin(),
],
},
\
5、eslint-loader编译报错
改为使用：eslint-webpack-plugin插件
\
使用步骤：
\
5.1、安装配置 eslint-webpack-plugin1）安装 eslint-webpack-plugin：（该插件使用 eslint 来查找和修复 JavaScript 代码中的问题。）npm install eslint-webpack-plugin --save-dev注意: 如果未安装 eslint >= 7 ，你还需先通过 npm 安装：
npm install eslint --save-dev
2）配置：webpack.config.js文件中：
const ESLintPlugin = require('eslint-webpack-plugin');
plugins: [
new ESLintPlugin({
exclude:'node_modules', //排除node_modules文件夹的eslint检查
fix:true //自动修复js格式错误
})
],
5.2、设置检查规则可参考官方文档：www.npmjs.com/package/esl… 6+。它需要eslint和eslint-plugin-import，eslint前面已经安装过，就不要再次安装npm install eslint-config-airbnb-base eslint-plugin-import --save-dev2）配置：两种方式：方式一：.eslintrc文件中添加："extends":"airbnb-base方式二：package.json文件中添加："eslintConfig": { "extends": "airbnb-base" }
5.3、编写js文件，检查配置eslint的可用性webpack运行项目，出现以下警告，可在js文件中有console.log()输出语句的上方，添加// eslint-disable-next-line，即可忽略该输出语句的警告提示。
\
6、HMR
在webpack5中不需要在安装插件，webpac5中自带，devServer.hot参数：默认webpack开启
// webpack 配置
module.exports = {
// ...
devServer: {
// 开启HMR功能
hot: true,
}
}
此时我们就实现了基本的模块热替换功能
\
在js中我们使用HMR的时候
if (module.hot) {
// module.hot 表示开启HMR
module.hot.accept('./assets/js/util.js', () => {
const isStr = print('./assets/js/util.js');
// eslint-disable-next-line
console.log('./assets/js/util.js 被执行~~~', isStr);
});
}
module这是commonjs如果我们设置能在js中使用，需要改为下边的，esmodule的形式
module.hot需要更改为
import.meta.webpackHot
\
如果还有其他的错误出现，不在这其中，欢迎大家评论留言~
\
感谢
到此，本篇介绍到此结束，之后将陆续整理 webpack 知识体系的内容分享，尽情期待，感谢您的阅读~~
转载自:https://juejin.cn/post/7135693176878628894