reactjs - webpack4 热重载不适用于某些文件
问题描述
当我尝试热重新加载某些文件的更改时,我遇到了 react webpack4 的问题。而那些我从原始路径修改的文件(/从/src/containers到/src/components)其余文件重新加载运行良好......我的webpack配置文件的代码如下:
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const Dotenv = require('dotenv-webpack');
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
output: {
path: path.join(__dirname, './'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new Dotenv()
],
devServer: {
historyApiFallback: true,
}
};
解决方案
如果您可以共享错误日志,我可能会告诉您真正的问题是什么。但是入口点缺少当前配置。如果您的应用程序是单页应用程序,请按照以下代码进行操作;
module.exports = {
entry: path.join(__dirname, "src", "index.js"),
...
}
如果您正在构建多页面应用程序,请执行以下代码;
module.exports = {
entry: {
pageOne: path.join(__dirname, "src", "pageOne", "index.js"),
pageTwo: path.join(__dirname, "src", "pageTwo", "index.js"),
pageThree: path.join(__dirname, "src", "pageThree", "index.js")
}
...
}
推荐阅读
- javascript - 有了 Promise,为什么浏览器会返回两次拒绝而不是两次解析?
- python - 将字符串元素添加到列表中
- c++ - 当有嵌套循环时,我应该如何决定应该嵌套哪个循环?
- node.js - 如何从错误对象中获取错误状态码
- c++ - 使用 initializer_list 构造的 std::vector 未按预期运行
- javascript - 重新排列 javascript 对象结构
- c# - C# - 运行外部 .exe 文件时允许的操作是否有任何限制?
- php - php74-syspaths 的用途是什么,php74-syspaths 不仅与 SCL 一起使用吗?
- powershell - 编码 ISO-8859-15 powershell
- reactjs - React 中的派生状态是什么,为什么它很重要?