Webpackでソースディレクトリの1対1ビルドディレクトリをコンパイル

Question

1. ソースディレクトリ内のすべてのファイルを同じディレクトリ構造を維持する ビルドディレクトリにコンパイルする方法はありますか？
2. 新しいコンポーネントを追加するたびにwebpack.config.jsファイルに複数のエントリポイントを手動で指定せずに上記を実行できますか？

私はこれを達成するために必要がありますか？私はGrunt + Browserifyでこれを成功させました。 Gruntにはexpand: trueと呼ばれる小道具があり、簡単にこれを実行できます。

は例えば、私は次のようにコンパイルしたい：

src 
|-- app 
    |-- index.html 
    |-- index.jsx 
    |-- routes.jsx 
    |-- components 
      |-- Home 
        |-- home.jsx 
        |-- home.scss 
      |-- About 
        |-- about.jsx 
        |-- about.scss 
    |-- common 
      |-- Dropdown 
        |-- dropdown.jsx 
        |-- dropdown.scss 

に：

build 
|-- app 
    |-- index.html 
    |-- index.js 
    |-- routes.js 
    |-- components 
      |-- Home 
        |-- home.js 
        |-- home.css 
      |-- About 
        |-- about.js 
        |-- about.css 
    |-- common 
      |-- Dropdown 
        |-- dropdown.js 
        |-- dropdown.css 

Answer 1

のWebPACKは、ソース変換ユーティリティへのソースであることを意図したものではありません。ですから、フォルダ内のすべてのsassファイルを同等のcssファイルにコンパイルするのは簡単ではありません。これが本当に必要な場合は、node-sass command line interfaceを使ってnpmスクリプトを書いてください。

実際にこれを行うにはwebpackを使用する必要がある場合は、globのマッチングを使用してプログラムでビルドすることができます。 Webpackの設定はちょうどJavaScriptです、あなたは構成オブジェクトを構築するために任意のロジックを使用することができます。

"webpack way"は、エントリポイントを持っており、javascriptファイルから必要なものを必要とすることです。

CSSルールのオーバーライドに関する具体的な懸念に対応するために、style-loaderは、reference counted apiを介して注入されたスタイルシートを処分する機能を提供します。

var style = require("style/useable!css!./home.css"); 
style.use(); 
style.unuse(); // when you navigate away from the page.