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

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

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

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

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

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

回复于 2024-05-02T07:32:37+08:00

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

1 回答

相关问题