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

实际上，我只想进入文件加载器模块中的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;

我写了一个插件，希望可以做您想做的事情，您可以指定已知或未知的入口点（使用glob）并指定确切的输出或使用入口文件路径和名称动态生成它们。 https://www.npmjs.com/package/webpack-entry-plus

我不确定是否存在相同的问题，因为从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{...}

您只能有一个输出路径。

来自文档https://github.com/webpack/docs/wiki/configuration#output

影响编译输出的选项。输出选项告诉Webpack如何将编译后的文件写入磁盘。请注意，虽然可以有多个入口点，但仅指定一种输出配置。

如果您使用任何哈希（[hash]或[chunkhash]），请确保模块的顺序一致。使用OccurenceOrderPlugin或recordsPath。