接 Webpack 5的最完整指南
React-hot-loader
热模块更换 在源代码中进行了某些更改，所做的更改就会应用到在浏览器中运行的应用中，而无需重新加载整个页面。
首先，安装：
npm install --save-dev react-hot-loader
增加 webpack 配置
+const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: path.resolve(__dirname, 'app', 'index.js'),
},
output: {
path: path.resolve(__dirname, 'build'),
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'app', 'index.html'),
}),
+ new webpack.HotModuleReplacementPlugin(),
],
devServer: {
port: 10010,
open: true,
+ hot: true,
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'],
},
{
test: /\.(png|jpg|gif)$/,
// 通用资源类型
type: 'asset', // webpack5 新增处理资源模块的一个内容，不需要 loader
// 现在，webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择:
// 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类
// 自定义设置
parser: {
dataUrlCondition: {
maxSize: 8 * 1024, // 小于 8*1024 转 base64
},
},
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.react.js'],
},
optimization: {
usedExports: true, // 使用查找的方式查看模块哪个使用了
minimize: true, // 开启压缩
splitChunks: { chunks: 'all' }, // 代码拆分
},
cache: {
type: 'filesystem', // 记录打包过的内容，通过文件缓存的方式保存到本地磁盘
},
};
此外，在app/index.js文件中，必须定义热重载可用并且应该使用：
module.hot.accept();
重启后，更改了内容，浏览器不再需要重新加载
来源：oschina
链接：https://my.oschina.net/u/3913691/blog/4926805