Question

我正在为项目设置Webpack，并使用HTML webpack插件生成HTML文件。

我的问题是生成的HTML包含所有包，而不是特定HTML文件的特定入口点。这是我的代码ATM

    const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    one: './js/one.js',
    two: './js/two.js',
    three: './js/three.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].js',
  },
  module: {
        loaders: [],
        rules:[
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          },
          {
            test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
            use: ['url-loader?limit=100000&name=./img/[hash].[ext]'],
          }

        ]
  },
  plugins: [
  new HtmlWebpackPlugin({
    title: 'One',
    template: 'one.ejs', // Load a custom template (ejs by default see the FAQ for details)
    filename: 'one.htm'
  }),
  new HtmlWebpackPlugin({
    title: 'Two',
    template: 'two.ejs', // Load a custom template (ejs by default see the FAQ for details)
    filename: 'two.htm'
  }),
  new HtmlWebpackPlugin({
    title: 'Three',
    template: 'three.ejs', // Load a custom template (ejs by default see the FAQ for details)
    filename: 'three.htm'
  })
  ]

};

根据文件：

https://webpack.js.org/plugins/html-webpack-plugin/

If you have multiple webpack entry points, they will all be included with script tags in the generated HTML.

有没有办法将one.js附加到one.htm？两个只有两个.htm？

Answer 1

在inject options中将false选项设置为HtmlWebpackPlugin，然后在EJS模板中过滤掉您想要的条目。

new HtmlWebpackPlugin({
  inject: false,
  title: 'One',
  template: 'one.ejs',
  filename: 'one.htm'
})

然后，您可以使用这些条目来模拟<script>标记，以表示您想要包含的标记。

这样的模板可以解决这个问题，它会根据条目检查所需输出文件的基本名称，如果它们与<script>标签匹配，则会模板。编写此EJS模板的方式应该能够将其用作所有HtmlWebpackPlugin选项的模板文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <%
    for (let chunk in htmlWebpackPlugin.files.chunks) {
      if (chunk === htmlWebpackPlugin.options.filename.split('.')[0]) {
  %><script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script><%
      }
    }
    %>
  </body>
</html>

这导致以下输出文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>One</title>
  </head>
  <body>
    <script type="text/javascript" src="./dist/one.js"></script>
  </body>
</html>

Answer 2

new HtmlWebpackPlugin({
    title: 'One',
    chunks: ['one'],
    template: 'ejs-render-loader!./one', 
    filename: 'one'
}),

对于任何人谷歌搜索，我也发现你可以使用块来做同样的事情。

Webpack HTML为每个入口点生成一个javascript

2 个答案: