Webpack 构建 - 单独的 html、css 和 js 输出路径答案

【问题标题】：Webpack build - separate html, css and js output pathsWebpack 构建 - 单独的 html、css 和 js 输出路径
【发布时间】：2017-03-16 13:32:23
【问题描述】：

我正在编写一个与现有 Flask 项目集成的 React 应用程序。如果我构建应用程序，获取 index.html 并将其移动到 Flask 的模板中，从构建中获取 js 和 css 文件夹并将它们移动到 Flask 的静态文件夹中，一切正常。

我现在想做的是确保一步构建是可能的，这意味着构建 React 应用程序的方式是 index.html 直接输出到 Flask 的模板中，而静态数据直接输出到 Flask 的静态数据中.不过，我不知道这是否可能。

是否可以将 Webpack 配置为在构建时使用单独的 HTML、js 和 css 输出路径？（额外信息，我正在使用一个弹出的 create-react-app 来通过 Webpack 配置。）

如果不可能，是否有其他方法可以确保一步构建（例如，构建为默认值，然后自动移动到单独的文件夹）？

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

配置输出的位置非常简单。首先，您需要将 output.path 设置为您的烧瓶目录。例如，如果您在弹出后保留 Create React App (CRA) 的结构，并且烧瓶目录是您的应用程序的同级目录，output 将如下所示：

output: {
  path: path.resolve(__dirname, '../../flask'),
  filename: 'static/js/[name].[chunkhash:8].js',
  chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
  publicPath: publicPath
}

现在您需要更改index.html 的位置，并且由于CRA 使用html-webpack-plugin，您可以将filename 选项设置为template/index.html，类似于output.filename：

new HtmlWebpackPlugin({
  inject: true,
  filename: 'template/index.html',
  template: paths.appHtml,
  minify: {
    // Minify options
  }
}),

由于 CRA 已将 CSS 输出配置为 static/css，因此您无需对其进行任何更改。

使用默认的 CRA 应用程序，flask 目录的内容如下：

flask
├─ asset-manifest.json
├─ static
│  ├─ css
│  │  ├─ main.9a0fe4f1.css
│  │  └─ main.9a0fe4f1.css.map
│  ├─ js
│  │  ├─ main.1ca7fdbb.js
│  │  └─ main.1ca7fdbb.js.map
│  └─ media
│     └─ logo.5d5d9eef.svg
└─ template
  └─ index.html

【讨论】：

感谢您的详细解答！