1. ホーム
  2. パス

[解決済み】Webpackのconfigで複数の出力パスを作成する方法

2022-04-08 20:46:39

質問

webpack.config.js ファイルに複数の出力パスを作成する方法をご存知の方はいらっしゃいますか?私はいくつかの異なるフォントファイルなどが付属しているbootstrap-sassを使用しています。webpackがこれらを処理するために、私は正しく動作しているファイルローダーを含めましたが、それが出力するファイルは、私のファイルの残りのために指定した出力パスに保存されています。

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"
    }

webpackが出力するものの拡張子の種類を見て、.woff .eot などで終わるものを別の出力パスに流用できるようなことを実現したいのですが、可能でしょうか?これは可能ですか?

私は少しググって、いくつかの解決策が提供されているgithubのこの*問題に行き当たりました。 を編集してください。

しかし、ハッシュメソッドを使って出力を指定するためには、エントリポイントを知っている必要があるようです。 例えば

var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
  entry : {
    a: entryPointsPathPrefix + '/a.jsx',
    b: entryPointsPathPrefix + '/b.jsx',
    c: entryPointsPathPrefix + '/c.jsx',
    d: entryPointsPathPrefix + '/d.jsx'
  },

  // send to distribution
  output: {
    path: './dist/js',
    filename: '[name].js'
  }
}

* https://github.com/webpack/webpack/issues/1189

しかし私の場合、フォントファイルに関する限り、入力プロセスは抽象化されており、私が知っているのは出力だけです。変換を受ける他のファイルの場合、ローダーによって処理されるためにそれらを必要とするポイントがあります。

解決方法は?

webpackは2016年6月現在、1つの設定につき1つの出力しかサポートしていないので、同じ問題があるかどうかはわかりません。既に見たことがあると思いますが Github上の問題 .

しかし、私は出力パスを分離するために マルチコンパイラ . (の設定オブジェクトを切り離す)。 webpack.config.js ).

var config = {
    // TODO: Add common Configuration
    module: {},
};

var fooConfig = Object.assign({}, config, {
    name: "a",
    entry: "./a/app",
    output: {
       path: "./a",
       filename: "bundle.js"
    },
});
var barConfig = Object.assign({}, config,{
    name: "b",
    entry: "./b/app",
    output: {
       path: "./b",
       filename: "bundle.js"
    },
});

// Return Array of Configurations
module.exports = [
    fooConfig, barConfig,       
];

その中で共通の設定がある場合は 拡張 ライブラリまたは Object.assign はES6で、または {...} は、ES7 のスプレッド演算子です。