从子目录中提供webpack构建的资源

Question

在我看过的所有示例中，入口HTML文件（例如index.html）与Webpack生成的所有构建资源位于同一目录下。

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

我希望我的入口HTML与构建的资源分离：

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

使用webpack可以实现这个吗？

- Pascal

---

我应该补充说明我的应用程序使用 CSS 和外部图片以及字体。当我从父目录中的 HTML 文件加载捆绑包时，这些资源路径就会出现问题。 - Pascal

Answer 1

哦，我明白了。在webpack配置中，您需要设置output.publicPath。该路径用于在CSS中添加所有相对URL的前缀。

在我的情况下，我使用了：

output: {
    path: path.resolve('./build'),
    publicPath: './build/',
    filename: '[name].bundle.js'
},

http://webpack.github.io/docs/configuration.html#output-publicpath

- Pascal

---

你是否使用HTMLWebpackPlugin来生成index.html文件呢？默认情况下，HTML文件会输出到同一目录下，对吗？ - Matthias