代码之家 › 专栏 › 技术社区 › Squiggs.

Web包HTML为每个入口点生成一个javascript

html-webpack-plugin webpack

Squiggs. · 技术社区 · 7 年前

我正在为一个项目设置网页包,并使用HTML网页包插件生成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.

有没有办法连接一个。js到1。htm?二比二。htm?

2 回复 | 直到 7 年前

Squiggs. 7 年前

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

对于任何一个在google上搜索的人来说,我刚刚发现你可以使用块来做同样的事情。

jshbrntt 7 年前

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

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

然后,您可以使用这些条目模板输出 <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>