Webpack 多个 HTML - 我只需要为每个 HTML 注入一个 .js答案

【问题标题】：Webpack multiple HTML - I need only to inject one .js for each HTMLWebpack 多个 HTML - 我只需要为每个 HTML 注入一个 .js
【发布时间】：2021-02-21 11:05:37
【问题描述】：

您好，我的 Webpack 配置存在以下问题：

我想从我的 src 文件夹中获得 3 个不同的 .js 文件。每个文件都应该仅连接到相应的同名html文件：

示例：我希望 app.html 只注入 app.js 而不是 index.js 和 register.js。

就目前而言，Webpack 生成 3 个 html 文件和 3 个 .js 文件，但是每个 .html 文件都被引用了所有 3 个 .js 文件，这破坏了我的代码，因为我在索引中没有事件监听器的相应 ID代码写成 app.js。

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

module.exports = {
    entry: {
        index: ['./src/js/index.js'],
        register: ['./src/js/register.js'],
        app: ['./src/js/app.js'],
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist',
    },
    devServer: {
        contentBase: './dist'
    },
   
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            chunks: 'index',
            template:'./src/index.html',
            filename: './src/index.html'
        }),
        new HtmlWebpackPlugin({
            inject: true,
            chunks: 'register',
            template:'./src/register.html',
            filename: './src/register.html'
        }),
        new HtmlWebpackPlugin({
            inject: true,
            chunks: 'app',
            template:'./src/app.html',
            filename: './src/app.html'
        })
    ],
    

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
};

【问题讨论】：

查看文档html-webpack-plugin 你有chunks 选项。
感谢您的回复。我已经查看了文档，我可以把我的头放在我做错的地方。我的 index.html 在 <script type="text/javascript" src="index.js"></script><script type="text/javascript" src="register.js"></script><script type="text/javascript" src="app.js"></script> 的末尾有以下脚本标签，我想要的只是：<script type="text/javascript" src="index.js"></script>

标签： javascript html webpack

【解决方案1】：

这里有一个向 html 添加一个块的示例

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

const config = [{
  site: 'index'
}, {
  site: 'register'
}, {
  site: 'app'
}];

const entryHtmlPlugins = config.map(({
  site
}) => {
  return new HtmlWebPackPlugin({
    filename: `${site}.html`,
    chunks: [site],
  });
});

module.exports = {
  mode: 'production',
  entry: {
    index: './src/js/index.js',
    register: './src/js/register.js',
    app: './src/js/app.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      },
    }, ],
  },
  plugins: [...entryHtmlPlugins],
};

【讨论】：

这就像一个魅力！我只需要添加一行：template: ./src/${site}.html