如何在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 Configurations

module.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