Webpack-dev-server 不使用 HtmlWebpackPlugin 选项中的模板

Question

*编辑： 示例（希望）更清楚。

我确定我错过了一些简单的东西，但我看不到它...

我正在使用一个 HtmlWebPlugin 实例，每个 page/entry 点都有一个模板。当我使用 webpack-dev-server 只有第一个实例实际上尊重模板中的内容时，其余的只使用简单的 html 和元标记

通过将 WriteFilePlugin 与开发服务器一起使用，或者通过简单地构建文件而不使用开发服务器，将文件写入磁盘，正确使用模板。我被难住了。

预期： about.html/index.html 这就是我使用 write-file-webpack-plugin 和运行 'webpack --config webpack.config.js'。 Index.html 相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <p>About</p>
</body>
</html>

Webpack-dev-server 的实际输出：（查看页面源代码）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script type="text/javascript" charset="utf-8" src="/about.js"></script>
    </body>

</html>

配置：

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const path = require('path');

module.exports = {
    entry: {
        index: './src/js/index.js',
        about: './src/js/about.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            }
        ]
    },
    devServer: {
        openPage: 'about'
    },
    plugins: [
        new WriteFilePlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.ejs',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            filename: 'about.html',
            template: 'src/about.ejs',
            chunks: ['about']
        }),
    ]
};

我看不出有什么明显的错误，但是我是多页面和 webpack 的新手

谢谢

**编辑：考虑到写入磁盘的文件都很好，感觉 wds 从哪里提供文件或我导航到哪里可能有问题？ localhost:8080 => html 和脚本链接在那里。 localhost:8080/index => 脚本链接但没有来自模板的 html。 localhost:8080/about => 脚本链接，但同样没有来自模板的 html。

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\Nick\Javascript\Webpack\test

Answer 1

这里作为参考：https://github.com/jaketrent/html-webpack-template/issues/69#issuecomment-376872044.

简而言之，您需要对所有块进行 LOOP 以插入最终的 html 文件。

下面是模板文件中的示例代码

<% for (var chunk in htmlWebpackPlugin.files.js) { %>
    <script src="<%= htmlWebpackPlugin.files.js[chunk]%>"></script>
<% } %>

希望对您有所帮助，如有误会请谅解。

Answer 2

我认为你缺少一个装载机检查 https://www.npmjs.com/package/ejs-webpack-loader

我在HtmlWebpackPlugin的package page里找到了一个例子，试试吧，说不定对你有帮助

plugin: {
  new HtmlWebpackPlugin({
    template: '!!ejs-webpack-loader!src/index.ejs'
  })
}

Answer 3

好吧，我不妨 post 我的耻辱作为答案，以防它在未来帮助其他人...

我导航到 localhost:8080/about 而不是 localhost:8080/about.html。

脚本是在 /about 注入的，但模板不是。在 /about.html 处同时使用了脚本和模板。我不确定为什么会有差异，但那是我的问题！

Webpack-dev-server 不使用 HtmlWebpackPlugin 选项中的模板

Webpack-dev-server not using the template in the HtmlWebpackPlugin options

javascript

webpack

webpack-dev-server

html-webpack-plugin