使用 Html Plugin 从子目录提供 webpack 构建资产答案

【问题标题】：Serve webpack built assets from a subdirectory with HtmlPlugin使用 Html Plugin 从子目录提供 webpack 构建资产
【发布时间】：2017-03-28 07:10:05
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript node.js angular webpack html-webpack-plugin

【解决方案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中的参考

【讨论】：