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

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

但是就我而言，就字体文件而言，输入过程有点抽象，我所知道的只是输出。对于我的其他文件进行转换的情况，有一个已知的点，即我要求将这些文件由加载程序处理。如果有办法找出发生此步骤的位置，那么我可以使用哈希方法自定义输出路径，但是我不知道这些文件在哪里。

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

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

如果您可以使用具有相同深度和文件夹结构级别的多个输出路径，则可以在webpack 2中进行此操作（尚未使用webpack 1.x进行测试）

基本上，您不遵循doc规则，而是提供文件名的路径。

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'
    },

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path
    }
};

这将采用此文件夹结构

/-
  foo.js
  bar.js

并变成

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js

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

您绝对可以从webpack.config文件中返回配置数组。但是，如果您只希望将工件副本放在项目文档的文件夹中，则这不是最佳解决方案，因为它会使webpack生成代码的时间加倍，从而使生成时间增加了一倍。

在这种情况下，我建议改用FileManagerWebpackPlugin插件：

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],

您只能有一个输出路径。

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

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

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

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