webpackのdistディレクトリに設定ファイルをコピーします。

Question

webpackのentryまたはoutputディレクトリの外部からファイルをコピーしたいとします。私はバンドルから完全に分離されたプロパティファイルを持つ必要があります。

だから私はこのような構造を持っている：

：私は私のwebpack.configを持ちたい

/project 
    /config 
    properties.js 
    /dist 
    bundle.js 
    webpack-created-index.html 
    /src 
    index.html-with-custom-script-tag 
    ...source files and folder here 

は（そのコンテンツをいじるなし）は、ソース管理configフォルダをコピーするので、私のdistフォルダには、次のようになります

/dist 
    /config 
    properties.js 
    bundle.js 
    webpack-created-index.html 

私はそうのようなファイルproperties.js私のWebPACK-作成したindex.htmlの負荷を持ってできるようにしたい：

<script type="text/javascript" src="../config/properties.js"></script> 

<script>タグの相対パスをdistから戻して、ファイルシステムがconfigのsrcになるまでファイルシステムをトラバースするようにしても、ブラウザに404が表示されます。

次のように私のwebpack.config.jsエントリー/出力は次のとおりです。

config.entry = { 
    app: './src/app.js' 
    }; 

    config.output = { 
    path: __dirname + '/dist', 
    publicPath: 'http://localhost:8080/', 
    filename: '[name].bundle.js' 
    }; 

はWebPACKのでこれを行うには、それが可能な、または私はこれを行うには一気またはノードのスクリプトのようなものに持参する必要があります。 ？私のは強く設定しますは、外部のスクリプトやライブラリを使ってビルドを複雑にすることなくwebpackでこれを実現することでしょう。

Answer 1

ノードモジュールcpy-cliを使用できます。 distのに

npm install cpy-cli 

コピーsrcフォルダ内のすべての.htmlファイルとパス構造

cpy '**/*.html' '../dist/' --cwd=src --parents 

を守る私は、自動的にファイルを挿入するには私のため

"copy-files": "cpy \"**/index.html\" favicon.ico \"../dist\" --cwd=src --parents" 

それを世話を簡単なスクリプトを持っています使用html-webpack-plugin

npm install html-webpack-plugin --save-dev 

Answer 2

CopyWebpackPluginは、srcからdistの宛先にファイルをコピーする必要がある場合に非常に便利です。