使用 webpack 的多个 html 文件 [英] Multiple html files using webpack
问题描述
我正在尝试在一个项目中做一些我不确定是否可行的事情，我的方式有误或误解了一些事情.我们正在使用 webpack，其想法是提供多个 html 文件.
I'm trying to do something in a project that I'm not sure if it is possible, I am in a wrong way or misunderstanding something. We are using webpack, and the idea is to serve more than one html file.
localhost:8181 -> 提供 index.html
localhost:8181/example.html -> 提供 example.html
localhost:8181 -> serves index.html
localhost:8181/example.html -> serves example.html
我正在尝试通过设置多个入口点来实现，遵循 文档:
I'm trying to do it by setting multiple entry points, following the documentation:
文件夹结构为:
/
|- package.json
|- webpack.config.js
/src
|- index.html
|- example.html
| /js
|- main.js
|- example.js
Webpack.config.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>
example.html:
example.html:
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
...
<script src="/example.bundle.js"></script>
</body>
</html>
有人知道我做错了什么吗?
Somebody knows what I'm doing wrong?
谢谢.
推荐答案
将入口点视为引用许多其他资产(如 javascript 模块、图像、模板等)的树的根.当您定义多个入口点时，您基本上将您的资产分成所谓的块，而不是将所有代码和资产都放在一个单一的包中.
See an entrypoint as the root of a tree that references many other assets like javascript modules, images, templates and so on. When you define more than one entrypoint, you basically split your assets into so called chunks to not have all your code and assets in one single bundle.
我认为您想要实现的是为不同的应用程序提供多个index.html"，这些应用程序还引用您已经使用入口点定义的不同资产块.
What I think you want to achieve is to have more than one "index.html" for different apps that also refer to different chunks of your assets which you already defined with your entrypoints.
复制一个 index.html 文件或什至生成一个引用这些入口点的文件都不是由入口点机制处理的 - 它是相反的.处理 html 页面的基本方法是使用 html-webpack-plugin，它不仅可以复制 html 文件，而且还具有广泛的模板机制.如果您想让您的捆绑包以捆绑包哈希作为后缀，这将特别有用，这样可以避免在更新应用时出现浏览器缓存问题.
Copying an index.html file or even generating one with references to these entrypoints is not handled by the entrypoint mechanism - it is the other way round. A basic approach for handling html pages is using the html-webpack-plugin which not only can copy html files but also has an extensive mechanism for templating. This is especially helpful if you want to have your bundles suffixed with a bundle hash that is pretty to avoid browser caching issues when you update your app.
由于您已将名称模式定义为 [id].bundle_[chunkhash].js，您不能再将您的 javascript 包作为 main.bundle.js 引用为它将被称为 main.bundle_73efb6da.js 之类的东西.
As you have defined a name pattern as [id].bundle_[chunkhash].js you can no longer reference your javascript bundle as main.bundle.js as it will be called something like main.bundle_73efb6da.js.
查看 html-webpack-plugin.特别适合您的用例:
Have a look at the html-webpack-plugin. Especially relevant for your use case:
你最终应该有类似的东西(警告:未测试)
You should probably have something like that in the end (warning: not tested)
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
filename: 'example.html',
template: 'src/example.html',
chunks: ['exampleEntry']
})
]
请注意在 chunks 数组中引用入口点的名称，因此在您的示例中，这应该是 exampleEntry.将模板移到特定文件夹中，而不是将它们直接放在根 src 文件夹中，可能也是一个好主意.
Please be aware to reference the name of the entrypoint in the chunks array, so in your example this should be exampleEntry. Probably it's also a good idea to move your templates into a specific folder instead of having them in directly inside the root src folder.
希望这会有所帮助.
这篇关于使用 webpack 的多个 html 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
