web-dev-qa-db-ja.com

Webpack configで複数の出力パスを作成する方法

誰もがwebpack.config.jsファイルに複数の出力パスを作成する方法を知っていますか？私はこれらを処理するためにwebpackのために私は正しく働いているファイルローダーを含めました、しかしそれが出力するファイルは私が指定した出力パスに保存されています私の残りのファイル：

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

私は、どんなwebpackが出力しているものでも.woff .eotなどで終わるものでも、それらが別の出力パスに迂回されているような拡張タイプを見ることができる何かを達成したいと思います。これは可能ですか？

私はちょっとグーグルをしていて、いくつかの解決策が提供されているgithubでこの問題に出会いました。edit：

しかし、ハッシュメソッドを使って出力を指定することができるようにエントリポイントを知る必要があるかのように見えます。

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

しかし、私の場合は、フォントファイルに関する限り、入力プロセスは抽象化されたもので、私が知っているのは出力だけです。私の他のファイルが変換を受けている場合、私がそれらを私のローダーによって扱われることを要求しているという既知のポイントがあります。このステップがどこで起こっているのかを突き止める方法があれば、ハッシュ方法を使って出力パスをカスタマイズすることができますが、これらのファイルがどこで必要とされているのかわかりません。

pathoutputconfigwebpackloader
125
spb

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

しかし、 multi-compiler を使用して出力パスを分離します。 （つまり、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,       
];

それらに共通の設定がある場合は、ES6では extend ライブラリまたはObject.assignを、ES7では{...}スプレッド演算子を使用できます。

181
Yeo

Webpackは複数の出力パスをサポートしています。

出力パスをエントリキーとして設定します。そして出力テンプレートとしてnameを使用してください。

webpackの設定：

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

生成された：

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js
188
zhengkenghong

同じレベルの深さとフォルダ構造を持つ複数の出力パスを使用できる場合は、webpack 2でこれを実行する方法があります（webpack 1.xではまだテストしていません）。

基本的にあなたはdocの規則に従わず、あなたはファイル名のパスを提供します。

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'
    },

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path
    }
};

それはこのフォルダ構造を取ります

/-
  foo.js
  bar.js

そしてそれをに変える

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js
17
cmswalker

私はあなたがしたいことをうまくやることができるプラグインを書きました。（ glob を使って）既知または未知のエントリポイントを指定し、正確な出力を指定または動的に生成できますエントリファイルのパスと名前を使用します。 https://www.npmjs.com/package/webpack-entry-plus

2
sanjsanj

出力パスは1つだけです。

ドキュメントから https://github.com/webpack/docs/wiki/configuration#output

コンパイルの出力に影響するオプション出力オプションは、コンパイルしたファイルをディスクに書き込む方法をWebpackに指示します。複数のエントリポイントが存在する可能性がありますが、1つの出力設定のみが指定されていることに注意してください。

ハッシュ（[hash]または[chunkhash]）を使用している場合は、モジュールの順序が一貫していることを確認してください。 OccurenceOrderPluginまたはrecordsPathを使用してください。

2
ex-zac-tly

実際には、ファイルローダーモジュールのindex.jsに入って、コンテンツの発行先を変更しただけです。これはおそらく最適な解決策ではありませんが、他の方法があるまでは、このローダーで処理されているのはフォントだけなので、これで問題ありません。

//index.js
var loaderUtils = require("loader-utils");
module.exports = function(content) {
    this.cacheable && this.cacheable();
    if(!this.emitFile) throw new Error("emitFile is required from module system");
    var query = loaderUtils.parseQuery(this.query);
    var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
        context: query.context || this.options.context,
        content: content,
        regExp: query.regExp
    });
    this.emitFile("fonts/"+ url, content);//changed path to emit contents to "fonts" folder rather than project root
    return "module.exports = __webpack_public_path__ + " + JSON.stringify( url) + ";";
}
module.exports.raw = true;
0
spb