如何在 Webpack 配置中创建多个输出路径 [英] How to create multiple output paths in Webpack config

问题描述

有谁知道如何在 webpack.config.js 文件中创建多个输出路径?我正在使用 bootstrap-sass，它带有一些不同的字体文件等.为了让 webpack 处理这些文件，我已经包含了正常工作的文件加载器，但是它输出的文件被保存到我指定的输出路径中我的其余文件:

Does anyone know how to create multiple output paths in a webpack.config.js file? I'm using bootstrap-sass which comes with a few different font files, etc. For webpack to process these i've included file-loader which is working correctly, however the files it outputs are being saved to the output path i specified for the rest of my files:

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"
    }

我想实现一些东西，我可以查看 webpack 输出的任何扩展类型以及以 .woff .eot 等结尾的内容，让它们转移到不同的输出路径.这可能吗?

I'd like to achieve something where I can maybe look at the extension types for whatever webpack is outputting and for things ending in .woff .eot, etc, have them diverted to a different output path. Is this possible?

我用谷歌搜索了一下，在 github 上发现了这个 *issue，其中提供了几个解决方案，

I did a little googling and came across this *issue on github where a couple of solutions are offered, edit:

但看起来好像您需要知道能够使用哈希方法指定输出的入口点例如:

but it looks as if you need to know the entry point in able to specify an output using the hash method eg:

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

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

however in my case, as far as the font files are concerned, the input process is kind of abstracted away and all i know is the output. in the case of my other files undergoing transformations, there's a known point where i'm requiring them in to be then handled by my loaders. if there was a way of finding out where this step was happening, i could then use the hash method to customize output paths, but i don't know where these files are being required in.

推荐答案

我不确定我们是否有同样的问题，因为截至 2016 年 6 月 webpack 仅支持每个配置一个输出.我想你已经看到了 Github 上的问题.

I'm not sure if we have the same problem since webpack only support one output per configuration as of Jun 2016. I guess you already seen the issue on Github.

但我使用 多编译器.(即分离webpack.config.js的配置对象)

But I separate the output path by using the multi-compiler. (i.e. separating the configuration object of 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,       
];

如果你有共同的配置，你可以使用extend 库或ES6 中的 Object.assign 或 ES7 中的 {...} 扩展运算符.

If you have common configuration among them, you could use the extend library or Object.assign in ES6 or {...} spread operator in ES7.

这篇关于如何在 Webpack 配置中创建多个输出路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！