[解決済み] Webpackで静的ファイルをビルドディレクトリにコピーする方法は？

質問

から移動しようとしています。 Gulp から Webpack . で Gulp からすべてのファイルとフォルダーをコピーするタスクがあります。 /static/ フォルダを /build/ フォルダーを作成します。と同じことをする方法 Webpack ? 何かプラグインが必要でしょうか？

解決方法は？

webpackはgulpとは仕組みが違うので、コピーする必要はありません。webpackはモジュールバンドルラーであり、ファイル内で参照したものはすべてインクルードされます。そのためにローダーを指定すればいいだけです。

だから、もしあなたが書いたら

var myImage = require("./static/myImage.jpg");

Webpack はまず、参照されたファイルを JavaScript としてパースしようとします (それがデフォルトだからです)。もちろん、それは失敗します。そのため、そのファイルタイプに対応したローダーを指定する必要があるのです。そのため ファイル - または URLローダー 例えば、参照されたファイルを webpack の出力フォルダ (これは build を返し、そのファイルのハッシュ化されたurlを返します。

var myImage = require("./static/myImage.jpg");
console.log(myImage); // '/build/12as7f9asfasgasg.jpg'

通常、ローダーはwebpackの設定によって適用されます。

// webpack.config.js

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
        ]
    }
};

もちろん、これを動作させるためには、最初にファイルローダーをインストールする必要があります。