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

路径 Webpack

神乐

2020-03-20

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

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

第2522篇《如何在Webpack配置中创建多个输出路径》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
凯西里 2020.03.20

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

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

小小 2020.03.20

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

西门 2020.03.20

您只能有一个输出路径。

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

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

如果您使用任何哈希([hash]或[chunkhash]),请确保模块的顺序一致。使用OccurenceOrderPlugin或recordsPath。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android