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

誰かが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

ただし、私の場合、フォントファイルに関する限り、入力プロセスは一種の抽象化されており、私が知っているのは出力だけです。他のファイルが変換されている場合、既知のポイントがあり、ローダーでそれらを処理する必要があります。この手順が行われている場所を見つける方法があった場合、ハッシュ方法を使用して出力パスをカスタマイズできますが、これらのファイルがどこで必要とされているのかわかりません。

2016年6月の時点で、webpackは構成ごとに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でスプレッド演算子を使用できます。

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

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

基本的には、ドキュメントのルールに従っておらず、ファイル名のパスを指定します。

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

希望どおりに機能するプラグインを作成しました。既知または未知のエントリポイントを（globを使用して）指定し、正確な出力を指定するか、エントリファイルのパスと名前を使用して動的に生成できます。 https://www.npmjs.com/package/webpack-entry-plus

あなたは間違いなくあなたのwebpack.configファイルから設定の配列を返すことができます。ただし、アーティファクトのコピーをプロジェクトのドキュメントのフォルダーに置きたいだけの場合は、Webpackがコードを2回ビルドするため、全体のビルド時間が2倍になるため、最適なソリューションではありません。

この場合、代わりにFileManagerWebpackPluginプラグインを使用することをお勧めします。

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],

出力パスは1つしか持てません。

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

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

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

実際には、ファイルローダーモジュールの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;