如何在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，其中提供了一些解决方案， edit:

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

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

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 库或Object.assign ES6或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屋！