Question

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

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

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

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

Answer 1

配置输出的位置非常简单。首先，您需要将output.path设置为您的flask目录。例如，如果在弹出后保留Create React App（CRA）的结构，并且flask目录是应用程序的兄弟目录，则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

Webpack构建 - 单独的html，css和js输出路径

1 个答案: