如何解决Webpack 的 HMR 不适用于 index.html
我已经为热模块更换设置了 webpack。它捆绑并实时重新加载 index.html 及其相关 CSS 页面中的每个更改。但是当我在 index.html 中放置一个指向另一个页面 (quem-somos.html) 的链接时,它会捆绑页面但不会实时重新加载它,因此我必须手动重新加载它。
可以看到页面被捆绑到了bundle.js文件中;终端中没有出现错误。
这是 webpack.config.js 的配置:
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './app/assets/scripts/index.js',output: {
filename: 'bundle.js',path: path.resolve(__dirname,'app'),},devtool: 'inline-source-map',devServer: {
contentBase: './app',hot: true,host: '0.0.0.0',port: 9000,useLocalIp: true,open: {
app: ['brave-browser','--incognito'],module: {
rules: [
{
test: /\.html$/,// replaces <use: raw-loader>
type: 'asset/source',{
test: /\.css$/,use: ['style-loader','css-loader'],],plugins: [
new webpack.HotModuleReplacementPlugin({}),mode: 'development',};
这是 index.js 配置:
import '../styles/styles.css';
import '../../index.html';
import '../../common/quem-somos.html';
if(module.hot) {
module.hot.accept('./index.js');
};
解决方法
我发现了我的错误。我试图仅通过一个入口点来定位我的所有 HTML 页面。但是 webpack 文档说:“简单规则:每个 HTML 页面一个入口点。SPA:一个入口点,MPA:多个入口点。”
我必须像这样配置入口/输出:
entry: {
index: './app/assets/scripts/index.js',quemSomos: './app/assets/scripts/quemSomos.js',contato: './app/assets/scripts/contato.js',},output: {
filename: '[name].bundle.js',path: path.resolve(__dirname,'app'),
并将其放在每个入口点(index.js、quemSomos.js 和 contato.js)中:
import '../styles/styles.css';
if(module.hot) {
module.hot.accept();
}
在每个 .html 文件中,我必须导入相关的包:
在 index.html 中:
<script src="index.bundle.js"></script>
在 quem-somos.html 中:
<script src="../quemSomos.bundle.js"></script>
最后在 contato.html 中:
<script src="../contato.bundle.js"></script>
请注意,webpack 不会将编译后的文件(包)写入磁盘。根据它的文档:“默认情况下,devServer.publicPath 是‘/’,所以你的包可以作为 http://localhost:8080/bundle.js 使用”(在我的例子中,我选择了一个不同的端口:9000)。因此,当您放置脚本标签时,请记住这一点!尽管它们在磁盘中不可用,但可以像在“/”下一样访问它们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。