Question

我已经为热模块更换设置了 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');
};

Answer 1

我发现了我的错误。我试图仅通过一个入口点来定位我的所有 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）。因此，当您放置脚本标签时，请记住这一点！尽管它们在磁盘中不可用，但可以像在“/”下一样访问它们。

Webpack 的 HMR 不适用于 index.html

1 个答案: