Question

有谁知道如何在webpack.config.js文件中创建多个输出路径？我正在使用bootstrap-sass，它带有一些不同的字体文件等。对于webpack来处理这些我已经包含的文件加载器，它正常工作，但它输出的文件被保存到我指定的输出路径其余的文件：

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

我想要实现一些东西，我可以查看扩展类型，无论webpack输出什么，以及以.woff .eot等结尾的东西，让它们转移到不同的输出路径。这可能吗？

我做了一些谷歌搜索，并在github上遇到了这个问题，提供了几个解决方案，编辑

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

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

然而在我的情况下，就字体文件而言，输入过程是抽象的，我所知道的只是输出。在我的其他文件正在进行转换的情况下，有一个已知的点，我要求它们然后由我的加载器处理。如果有办法找出这一步发生的地方，我可以使用哈希方法来自定义输出路径，但我不知道这些文件的位置。

Answer 1

Webpack确实支持多个输出路径。

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

webpack config：

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

Answer 2

我不确定我们是否有同样的问题，因为截至2016年6月，webpack仅支持每个配置一个输出。我猜你已经看过issue on Github。

但我使用multi-compiler分隔输出路径。（即分离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.assign

如果您在其中有共同配置，则可以使用ES6中的extend库或{...}或ES7中的{{1}}点差运算符。

Answer 3

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

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

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

Answer 4

您现在可以（从Webpack v5.0.0开始）使用新的“描述符”语法（https://webpack.js.org/configuration/entry-context/#entry-descriptor）为每个条目指定唯一的输出路径–

module.exports = {
  entry: {
    home: { import: './home.js', filename: 'unique/path/1/[name][ext]' },
    about: { import: './about.js', filename: 'unique/path/2/[name][ext]' }
  }
};

Answer 5

您只能有一个输出路径。

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

的

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

你可以这样做

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;
}

Answer 9

就我而言，我遇到过这种情况

const config = {
    entry: {
    moduleA: './modules/moduleA/index.js',
    moduleB: './modules/moduleB/index.js',
    moduleC: './modules/moduleB/v1/index.js',
    moduleC: './modules/moduleB/v2/index.js',
  },
}

我是这样解决的（webpack4）

const config = {
entry: {
        moduleA: './modules/moduleA/index.js',
        moduleB: './modules/moduleB/index.js',
        'moduleC/v1/moduleC': './modules/moduleB/v1/index.js',
        'moduleC/v2/MoculeC': './modules/moduleB/v2/index.js',
      },
    }

Answer 10

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

Answer 11

如果在所有答案之后都不太明显，您还可以输出到完全不同的目录（例如，标准dist文件夹之外的目录）。您可以通过使用根作为路径（因为只有一个路径）并将路径的完整“目录部分”移动到entry选项（因为可以有多个条目）来做到这一点：

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。

Answer 12

请不要使用任何替代方法，因为这会影响构建性能。

Webpack文件管理器插件

易于安装，将此标签复制到webpack.config.js上

const FileManagerPlugin = require('filemanager-webpack-plugin');

安装

npm install filemanager-webpack-plugin --save-dev

添加插件

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

屏幕截图

Blockquote

Answer 13

问题已经出在以下语言中：

条目（这是一个对象（键/值），用于定义输入*）
输出（这是一个对象（键/值），用于定义输出*）

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

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

仅通过提供输入/输出定义列表即可解决所有这些问题……列表输入/输出定义。

尽管此评论没有多大帮助，但我们可以通过指出错误来吸取教训。

Vinod Kumar：好的解决方法，它的

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/'},
          ],
        },
      }
    }),
  ],
};

顺便说一句。这是我对stackoverflow的第一个评论（作为程序员10年后），stackoverflow吸引了可用性，就像为什么到处都有这么多文本？我的眼睛在流血。

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

13 个答案: