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

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

  •  1
  • 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 年前
        1
  •  5
  •   Squiggs.    7 年前
    new HtmlWebpackPlugin({
        title: 'One',
        chunks: ['one'],
        template: 'ejs-render-loader!./one', 
        filename: 'one'
    }),
    

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

        2
  •  3
  •   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>