【发布时间】：2020-07-28 20:22:08
【问题描述】：
*编辑：示例（希望）更清楚。
我确定这里有一些简单的东西我错过了，但我看不到它......
我使用一个 HtmlWebPlugin 实例，每个页面/入口点都有一个模板。当我使用 webpack-dev-server 时，只有第一个实例实际上尊重模板中的内容，其余的只使用简单的 html 和元标记
将文件写入磁盘，无论是通过使用带有 dev-server 的 WriteFilePlugin，还是通过在没有 dev-server 的情况下简单地构建文件，都可以正确使用模板。我被难住了。
预期： 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
【问题讨论】：
-
您是否尝试将 webpack.common.js 文件的
plugins部分添加到 webpack.dev.js 文件中？如果 HtmlWebpackPlugin 不在您的 webpack 开发服务器配置中，您的 webpack 开发服务器将如何知道以您指定的方式使用它？尝试将其添加到 webpack.dev.js 文件中。 -
嗨，Seth，谢谢，我会试一试，但是 webpack-merge 不会从 webpack.common.js 和 webpack.dev.js 创建单个配置吗？
-
不幸的是没有解决这个问题。很确定 webpack.common.js 正在与 webpack.dev.js 合并到一个配置文件中，因为在前者中添加 `devServer: {openPage: 'admin' },` 会打开正确的页面，并且 index.html 确实使用正确的模板。感谢您的回复
标签： javascript webpack webpack-dev-server html-webpack-plugin