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

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

我想实现的东西,我可以看看扩展类型的任何webpack输出和东西结束。woff .eot等,有他们转移到不同的输出路径。这可能吗?

我做了一点谷歌搜索,在github上遇到了这个*问题,那里提供了一些解决方案,编辑:

但是,似乎您需要知道入口点才能使用散列方法指定输出 例如:

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

然而在我的例子中,就字体文件而言,输入过程有点抽象,我所知道的只是输出。在我的其他文件进行转换的情况下,有一个已知的点,我要求他们在然后由我的加载器处理。如果有办法找到这一步发生在哪里,那么我就可以使用散列方法自定义输出路径,但我不知道这些文件需要放在哪里。


当前回答

我只需要在文件加载器模块中进入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;

其他回答

我不确定我们是否有同样的问题,因为截至2016年6月,webpack只支持每个配置一个输出。我猜你已经在Github上看到了这个问题。

但是我使用多编译器分离了输出路径。(即分离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。在ES6或{…ES7中的扩展操作符。

如果所有的答案都不明显,你也可以输出到一个完全不同的目录(例如标准dist文件夹之外的目录)。你可以使用你的根路径作为路径(因为你只有一个路径),并通过将路径的完整“目录部分”移动到入口选项(因为你可以有多个条目):

entry: {
  'dist/main': './src/index.js',
  'docs/main': './src/index.js'
},
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, './'),
}

这个配置会导致。/dist/main.js和。/docs/main.js被创建。

我只需要在文件加载器模块中进入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;

Webpack支持多条输出路径。

将输出路径设置为入口键。并使用名称作为输出模板。

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

您只能有一个输出路径。

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

影响编译输出的选项。输出选项告诉Webpack如何将编译好的文件写入磁盘。注意,虽然可以有多个入口点,但只指定了一个输出配置。 如果您使用任何散列([hash]或[chunkash]),请确保模块的顺序一致。使用OccurenceOrderPlugin或recordsPath。