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

Question

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

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

我正在使用一个 HtmlWebPlugin 实例，每个页面/入口点都有一个模板。 当我仅使用 webpack-dev-server 时，第一个实例实际上尊重模板中的内容，rest 仅使用简单的 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 的实际 output：（查看页面源代码）

<!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

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

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

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

Answer 2

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

我在 package 页面找到了一个带有 HtmlWebpackPlugin 的例子，试试吧，也许它会对你有所帮助

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

Answer 3

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

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

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

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

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

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

问题描述

3 个解决方案

解决方案1
2 已采纳 2020-08-02 07:59:41

解决方案2
1 2020-08-02 05:57:13

解决方案3
0 2020-08-02 03:44:51

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2020-08-02 07:59:41

解决方案2 1 2020-08-02 05:57:13

解决方案3 0 2020-08-02 03:44:51

解决方案1
2 已采纳 2020-08-02 07:59:41

解决方案2
1 2020-08-02 05:57:13

解决方案3
0 2020-08-02 03:44:51