javascript - 使用 HtmlPlugin 从子目录提供 webpack 构建的资产

Question

我目前正在使用 WebpackHtmlPlugin 来简化我的 index.html 入口点，但是我的主要问题是 index.html 与所有其他资产处于同一级别（即 publicPath 指向的任何位置）。

我想将 index.html 放在一个文件夹中，并将 webpack 生成的所有资产放在一个子文件夹中。像这样的东西

index.html
build/
  bundle.js
  1.bundle.js
  2.bundle.js

有没有什么方法可以在不违背 webpack 并手动映射每个资产并将 publicPath 设置为 root 的情况下实现这一点？

Answer 1

您可以将 CopyWebpackPlugin 与 HTMLWebpackPlugin 一起使用...

plugins: [
    new HtmlWebpackPlugin({
        filename: "index.html",
        template: "index.html",
        inject: false
    }),
    new CopyWebpackPlugin([
        { from: 'from/directory/**/*', to: '/absolute/path' },
    ])
],

请参阅https://www.npmjs.com/package/copy-webpack-plugin中的参考