如何在Webpack配置中创建多个输出路径

Question

有谁知道如何在webpack.config.js文件中创建多个输出路径？我正在使用bootstrap-sass，它带有一些不同的字体文件，等等。为了使webpack能够处理这些，我包括了可以正常工作的文件加载器，但是将其输出的文件保存到了我指定的输出路径中我其余的文件：

    output: {

      path: __dirname + "/js",

      filename: "scripts.min.js"

    }

我想实现某种目标，在这里我可以查看扩展名的类型，无论Webpack正在输出的内容还是以.woff .eot等结尾的内容，都可以将其转移到其他输出路径。这可能吗？

我做了一些谷歌搜索，并在github上发现了这个* issue，其中提供了一些解决方案，请编辑：

但似乎您需要了解能够使用哈希方法指定输出的入口点，例如：

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

但是就我而言，就字体文件而言，输入过程有点抽象，我所知道的只是输出。对于我的其他文件进行转换的情况，有一个已知的点，即我要求将这些文件由加载程序处理。如果有办法找出发生此步骤的位置，那么我可以使用哈希方法自定义输出路径，但是我不知道这些文件在哪里。

Answer 1

我不确定我们是否存在相同的问题，因为从2016年6月开始，Webpack每种配置仅支持一个输出。我想您已经在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 Configurationsmodule.exports = [    fooConfig, barConfig,       ];如果它们之间具有通用配置，则可以在ES6中使用扩展库或在ES7中使用扩展运算符。Object.assign{...}

Answer 2

Webpack确实支持多个输出路径。将输出路径设置为输入键。并使用nameas作为输出模板。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