Webpackビルド - html、css、jsの出力パスを別々にする

Question

私は既存のFlaskプロジェクトと統合するReactアプリケーションを書いています。私がアプリケーションをビルドする場合は、index.htmlをFlaskのテンプレートに移動し、jsとcssフォルダをビルドから取り出し、Flaskの静的フォルダに移動すると、すべて正常に動作します。

ここで私がしたいのは、ワンステップビルドが可能であることです。これは、index.htmlがFlaskのテンプレートに直接出力され、統計がFlaskのテンプレートに直接出力されるようにReactアプリケーションを構築することを意味します静的私はこれがすべて可能であるかどうかはわかりません。

ビルド時にHTML、js、cssに別々の出力パスを使用するようにWebpackを設定することはできますか？ （Extra info、Webpackの設定を通過できるようにするために、イジェクトされたCreate-Reaction-Appを使用しています）。

もし可能でないなら、私はワンステップビルドを確実にするために別の方法がありますか？デフォルトでは、別のフォルダに自動的に移動します）。

Answer 1

出力をどこに設定するかは非常に簡単です。まず、フラスコディレクトリに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はあなたがoutput.filenameと同様に、template/index.htmlへfilenameオプションを設定することができますhtml-webpack-plugin使用していますよう：CRAとして

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

は、すでにあなたがそれのために何を変更する必要はありませんstatic/cssにあるように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