使用webpack的多个html文件

我正在尝试在一个项目中做一些我不确定是否有可能，我是错误的方式或误解的东西。我们正在使用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>

example.html的：

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="/style/default.css">
</head>
<body>
    ...
    <script src="/example.bundle.js"></script>
</body>
</html>

有人知道我做错了什么吗？

谢谢。

解决方法

将入口点视为树的根，它引用了许多其他资源，如javascript模块，图像，模板等。当您定义多个入口点时，基本上将资产拆分为所谓的块，以便不将所有代码和资产放在一个捆绑包中。

我认为您想要实现的目标是为不同的应用程序提供多个“index.html”，这些应用程序也会引用您已使用入口点定义的不同资产块。

复制index.html文件甚至生成一个引用这些入口点的文件都不是由入口点机制处理的 – 反之亦然。处理html页面的基本方法是使用html-webpack-plugin，它不仅可以复制html文件，还具有广泛的模板机制。如果您希望将捆绑包后缀为捆绑哈希，这对于在更新应用程序时避免浏览器缓存问题非常有用。

由于您已将名称模式定义为[id] .bundle_ [chunkhash] .js，因此您无法再将您的javascript包引用为main.bundle.js，因为它将被称为main.bundle_73efb6da.js。

看一下html-webpack-plugin.特别适用于您的用例：

> Generating multiple html files
> Filtering chunks

你最终应该有这样的东西(警告：未经测试)

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文件夹中也可能是个好主意。

希望这可以帮助。

原文地址：https://www.jb51.cc/html/232470.html

使用webpack的多个html文件

解决方法

相关推荐