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

有人知道如何在webpack.config.js文件中创建多个输出路径吗？我正在使用bootstrap sass，它附带了一些不同的字体文件等。为了处理这些文件，webpack中包含了文件加载器，该加载器工作正常，但是它输出的文件将保存到我为其余文件指定的输出路径：

输出：{
路径：_dirname+“/js”，
文件名：“scripts.min.js”
}

我想实现一些东西，在那里我可以查看任何Web包输出的扩展类型，以及以.woff.eot等结尾的东西，将它们转移到不同的输出路径。这可能吗

我在谷歌上搜索了一下，在github上发现了这个*问题，这里提供了一些解决方案，edit:

但看起来您需要知道中的入口点，以便能够使用哈希方法指定输出 例如：

var entryPointsPathPrefix='./src/javascripts/pages'；
var WebpackConfig={
条目：{
a:entryPointsPathPrefix+'/a.jsx',，
b:entryPointsPathPrefix+'/b.jsx',，
c:entryPointsPathPrefix+'/c.jsx',，
d:entryPointsPathPrefix+'/d.jsx'
},
//发送到分发
输出：{
路径：'./dist/js'，
文件名：'[name].js'
}
}

*

---

然而在我的例子中，就字体文件而言，输入过程有点抽象，我只知道输出。在我的其他文件正在进行转换的情况下，有一个已知的点，我要求加载程序处理它们。如果有办法找出这一步发生的地方，我可以使用hash方法来定制输出路径，但我不知道这些文件在哪里需要

您只能有一个输出路径

从文件中

影响编译输出的选项。输出选项告诉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;

---

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

但是我使用。（即分离

webpack.config.js

的配置对象）

var配置={
//TODO:添加公共配置
模块：{}，
};
var fooConfig=Object.assign（{}，config{
名称：“a”，
条目：“./a/app”，
输出：{
路径：“./a”，
文件名：“bundle.js”
},
});
var barConfig=Object.assign（{}，config{
名称：“b”，
条目：“./b/应用程序”，
输出：{
路径：“./b”，
文件名：“bundle.js”
},
});
//返回配置数组
module.exports=[
fooConfig，barConfig，
];

---

如果它们之间有共同的配置，则可以使用库或对象。在ES6中分配，或在ES7中分配{…}扩展运算符。

如果您可以使用具有相同深度和文件夹结构的多个输出路径，则在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

---

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.config文件返回配置数组。但是，如果您只想将工件的副本放在项目文档的文件夹中，这并不是一个最佳的解决方案，因为它使webpack构建代码的时间增加了一倍

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

const FileManagerPlugin=require（'filemanager-webpack-plugin'）；
// ...
插件：[
// ...
新文件管理器插件({
奥尼德：{
副本：[{
来源：'./dist/*.'，
目的地：'./公共/'，
}],
},
}),
],

如果答案不明显，您也可以将其输出到完全不同的目录（例如标准

dist

文件夹之外的目录）。您可以使用根目录作为路径（因为您只有一个路径），并将路径的完整“目录部分”移动到

条目

选项（因为您可以有多个条目）：

此配置将导致创建

/dist/main.js

和

/docs/main.js

。

您现在可以（从Webpack v5.0.0开始）使用新的“描述符”语法（）为每个条目指定唯一的输出路径

module.exports={
条目：{
主页：{import:'./home.js'，文件名：'unique/path/1/[name][ext]}，
关于：{import:'./about.js'，文件名：'unique/path/2/[name][ext]}
}
};

请不要使用任何变通方法，因为它会影响生成性能

网页包文件管理器插件

易于安装将此标签复制到webpack.config.js顶部

const FileManagerPlugin=require（'filemanager-webpack-plugin'）；

安装

npm安装文件管理
entry: {
  'dist/main': './src/index.js',
  'docs/main': './src/index.js'
},
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, './'),
}

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

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',
  },
}

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',
      },
    }