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

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

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

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

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

，但看起来好像你需要知道入口点，能够使用哈希方法指定输出 如:< / p > 

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

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

190433 次浏览
小开

您只能有一个输出路径。

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

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

如果您使用任何散列([hash]或[chunkash])，请确保模块的顺序一致。使用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只支持每个配置一个输出。我猜你已经见过问题在Github上。

但是我通过使用multi-compiler. xml分隔输出路径。(即分离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中使用扩展库或Object.assign，在ES7中使用{...}扩展操作符。

小开

如果你可以使用多个具有相同深度和文件夹结构的输出路径，在webpack 2中有一种方法可以做到这一点(尚未使用webpack 1.x进行测试)

基本上你不需要遵循doc规则，你需要为文件名提供一个路径。

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支持多条输出路径。

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

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://www.npmjs.com/package/webpack-entry-plus

小开

你当然可以从webpack中返回配置数组。配置文件。但如果你只是想在项目文档的文件夹中保存一份工件副本，这并不是一个最佳的解决方案，因为它会使webpack构建代码的时间增加两倍。

在这种情况下，我建议使用FileManagerWebpackPlugin插件:

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

如果所有的答案都不明显，你也可以输出到一个完全不同的目录(例如，在你的标准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被创建。

小开

你现在可以(从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]' }
}
};
小开

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

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

截图

enter image description here

小开

问题已经在语言中了:

  • 条目(它是一个对象(键/值)，用于定义输入*)
  • 输出(它是一个对象(键/值)，用于定义输出*)

根据有限的占位符(如'[name]')来区分输出的想法定义了限制。

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

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

维诺德·库马尔的好的解决方法是:

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

你可以做

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

我这样解(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',
},
}

提交答案