我正在尝试在一个项目中做一些事情，但我不确定是否可能，我的方式错误或误解了某些东西。我们正在使用 webpack，其想法是提供多个 html 文件。
localhost:8181 -> 提供index.html
localhost:8181/example.html -> 提供 example.html
我试图通过设置多个入口点来做到这一点，遵循 documentation :
文件夹结构为:
/
|- package.json
|- webpack.config.js
/src
|- index.html
|- example.html
| /js
|- main.js
|- example.js
Webpack.config.js:
...
entry: {
main: './js/main.js',
exampleEntry: './js/example.js'
},
output: {
path: path.resolve(__dirname, 'build', 'target'),
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[id].bundle_[chunkhash].js',
sourceMapFilename: '[file].map'
},
...
index.html
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
<div id="container"></div>
<script src="/main.bundle.js"></script>
</body>
</html>
示例.html:
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
...
<script src="/example.bundle.js"></script>
</body>
</html>
有人知道我做错了什么吗？
谢谢。
最佳答案
将入口点视为树的根，该树引用许多其他资源，例如 javascript 模块、图像、模板等。当您定义多个入口点时，您基本上会将 Assets 分割成所谓的 block ，以免将所有代码和 Assets 放在一个包中。
我认为您想要实现的是为不同的应用程序提供多个“index.html”，这些应用程序还引用您已经使用入口点定义的不同 Assets block 。
复制一个index.html文件或者甚至生成一个引用这些入口点的文件不是由入口点机制处理的——反之亦然。处理 html 页面的基本方法是使用 html-webpack-plugin ，它不仅可以复制 html 文件，而且还具有广泛的模板机制。如果您想让 bundle 带有 bundle 哈希后缀，这非常有用，这样可以避免更新应用程序时出现浏览器缓存问题。
由于您已将名称模式定义为 [id].bundle_[chunkhash].js，您无法再将您的 javascript 包引用为 main.bundle.js 作为它将被称为类似 main.bundle_73efb6da.js。
看看 html-webpack-plugin 。特别适合您的用例:
你最终可能应该有类似的东西(警告:未经测试)
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
filename: 'example.html',
template: 'src/example.html',
chunks: ['exampleEntry']
})
]
请注意引用 block 数组中入口点的名称，因此在您的示例中，这应该是 exampleEntry。将模板移动到特定文件夹中而不是将它们直接放在根 src 文件夹中可能也是一个好主意。
关于webpack - 使用 webpack 生成多个 html 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39798095/