[解決済み】Webpackのconfigで複数の出力パスを作成する方法
質問
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 のスプレッド演算子です。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン