Webpack：包含 html 个文件及其 js 脚本以及独立的 js 脚本

Question

我目前有一个遵循这种结构的项目：

src/
├── browserAction/
│   ├── assets/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── options/
│   ├── assets/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── manifest.json
├── background_script.js
└── content_script.js

我目前有 webpack 设置来使用 babel 转换背景和内容脚本并将清单复制为独立文件但我不知道如何捆绑两个 index.html 文件（包含 script.js 和 style.js 的内容) 并保持文件结构位于两个单独的文件夹中。 我当前的 webpack 配置是：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const IS_PRODUCTION = process.env.NODE_ENV === 'production';

module.exports = {
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    context: path.resolve(__dirname, 'src'),
    entry: { background_script: './background_script.js', content_script: './content_script.js'},
    module: {
        rules: [
            {
                test: /\.html$/i,
                use: [
                    'file-loader',
                    'extract-loader',
                    {
                        loader: 'html-loader',
                        options: {
                            minimize: IS_PRODUCTION,
                        },
                    },
                ],
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [new CopyWebpackPlugin({ patterns: [{ from: 'manifest.json', to: '.' }] }), new CleanWebpackPlugin()],
};

我的意图是将 output 转换为 dist 匹配项：

dist/
├── browserAction/
│   └── index.html
├── options/
│   └── index.html
├── manifest.json
├── background_script.js
└── content_script.js

我需要使用什么装载机来实现这一目标？ 我一直在尝试各种方法，但无法获得所需的结果。

Answer 1

您正在寻找html-webpack-plugin 。 示例配置：

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

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    browser_action: './browserAction/script.js',
    options: './options/script.js',
    background_script: './background_script.js', 
    content_script: './content_script.js'
  },
  module: {
    // your loaders
    // ...
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'browserAction/index.html',
      template: 'browserAction/index.html',
      chunks: ['browser_action']      
    }),
    new HtmlWebpackPlugin({
      filename: 'options/index.html',
      template: 'options/index.html',
      chunks: ['options']
    })
  ]
}

顺便说一下，您似乎正在尝试编写浏览器扩展； 我推荐这样的样板，其中已经配置了 webpack。