Webpack構建 - 單獨的html，css和js輸出路徑

我正在編寫一個與現有Flask項目集成的React應用程序。如果我構建應用程序，請將index.html移動到Flask的模板中，從構建中獲取js和css文件夾並將它們移動到Flask的靜態文件夾中，一切正常。Webpack構建 - 單獨的html，css和js輸出路徑

我現在想要做的是確保一步構建是可能的，這意味着構建React應用程序的方式是將index.html直接輸出到Flask的模板中，並將靜態直接輸出到Flask的靜。不過，我不知道這是否可能。

是否有可能配置Webpack使用單獨的輸出路徑的HTML，js和css時進行構建？（額外的信息，我使用的是噴射的創建 - 反應 - 應用能夠經歷的WebPack配置。）

如果這是不可能的，是有不同的方式，我可以保證一步建立（如建於默認，然後自動移動到單獨的文件夾）？

來源

2017-03-16 dnmh

配置輸出的位置非常簡單。首先，您需要將output.path設置爲燒瓶目錄。例如，如果你不停的結構創建排出後作出反應應用（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 
├─ 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

來源

2017-03-16 15:59:10

謝謝你的詳細解答！ – dnmh

Webpack構建 - 單獨的html，css和js輸出路徑

回答

相關問題