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

Question

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

258

有人知道如何在webpack.config.js文件中创建多个输出路径吗？我正在使用带有几个不同字体文件等的bootstrap-sass。为了让webpack处理这些文件，我已经包含了file-loader，它正在正确地工作，但是它输出的文件被保存到我指定给其他文件的输出路径中：

    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

然而在我的情况下，就字体文件而言，输入过程有点被抽象化了，我只知道输出结果。对于其他正在经历转换的文件，存在一个已知的点，在这个点上我需要将它们导入以便由我的加载器处理。如果有一种方法可以找出这个步骤发生的位置，那么我就可以使用哈希方法来自定义输出路径，但是我不知道这些文件在哪里被导入。

- spb

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- spb · Answer 1

我最终只是进入了file-loader模块中的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;

- Alexandros Fotiadis · Answer 2

问题已经存在于语言中：

entry（它是一个对象（键/值），用于定义输入*）
output（它是一个对象（键/值），用于定义输出*）

基于有限的占位符（如“[name]”）区分输出的想法定义了限制。

我喜欢webpack的核心功能，但使用需要重写抽象定义，这些定义基于逻辑和简单性...这是软件开发中最难的事情...逻辑和简单性。

所有这些都可以通过提供一系列输入/输出定义来解决... 一系列输入/输出定义列表。

Vinod Kumar's 的好方法是：

module.exports = {
   plugins: [
    new FileManagerPlugin({
      events: {
        onEnd: {
          copy: [
            {source: 'www', destination: './vinod test 1/'},
            {source: 'www', destination: './vinod testing 2/'},
            {source: 'www', destination: './vinod testing 3/'},
          ],
        },
      }
    }),
  ],
};

- fariborz shalghooni por · Answer 3

你可以这样做：

var config = {
    // TODO: Add common Configuration
    module: {},
};

var x= Object.assign({}, config, {
    name: "x",
    entry: "./public/x/js/x.js",
    output: {
       path: __dirname+"/public/x/jsbuild",
       filename: "xbundle.js"
    },
});
var y= Object.assign({}, config, {
    name: "y",
    entry: "./public/y/js/FBRscript.js",
    output: {
       path: __dirname+"/public/fbr/jsbuild",
       filename: "ybundle.js"
    },
});

let list=[x,y];

for(item of list){
    module.exports =item;
}