有人知道如何在webpack.config.js文件中创建多个输出路径吗?我正在使用bootstrap-sass,它附带了一些不同的字体文件等。为了webpack处理这些,我已经包括了正常工作的文件加载器,但是它输出的文件被保存到我为其他文件指定的输出路径:
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
然而在我的例子中,就字体文件而言,输入过程有点抽象,我所知道的只是输出。在我的其他文件进行转换的情况下,有一个已知的点,我要求他们在然后由我的加载器处理。如果有办法找到这一步发生在哪里,那么我就可以使用散列方法自定义输出路径,但我不知道这些文件需要放在哪里。
你可以做
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;
}
如果你可以使用多个具有相同深度和文件夹结构的输出路径,在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
我不确定我们是否有同样的问题,因为截至2016年6月,webpack只支持每个配置一个输出。我猜你已经在Github上看到了这个问题。
但是我使用多编译器分离了输出路径。(即分离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,
];
如果它们之间有公共配置,则可以使用扩展库或Object。在ES6或{…ES7中的扩展操作符。
问题已经在语言中了:
条目(是一个对象(键/值),用于定义输入*)
输出(是一个对象(键/值),用于定义输出*)
根据有限的占位符(如'[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/'},
],
},
}
}),
],
};