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

小编典典

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

all

有谁知道如何在 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

但是就我而言，就字体文件而言，输入过程有点抽象，我只知道输出。在我的其他文件正在进行转换的情况下，有一个已知点我需要它们然后由我的加载程序处理。如果有办法找出这一步发生在哪里，我可以使用哈希方法自定义输出路径，但我不知道这些文件在哪里需要。

阅读 133

2022-06-08

共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,       
];

如果您之间有共同的配置，您可以使用扩展库或Object.assignES6
或{...}ES7 中的扩展运算符。

2022-06-08