[英]In webpack, how can I have different output directories for multiple entry points?
我有以下带有多个入口点的 webpack 配置...
module.exports = {
entry: {
somePage: "./scripts/someDir/somePage.js",
anotherPage: "./scripts/someDir/someSubDir/anotherPage.js"
},
output: {
path: path.resolve(__dirname, 'out'),
filename: '[name].js'
},
...
是否可以为每个条目设置不同的输出路径?
而不是获得...的输出
/out/somePage.js /out/anotherPage.js
我想要...
/out/someDir/somePage.js /out/someDir/someSubDir/anotherPage.js
对我来说理想的解决方案是output.path
接受一个函数。 例如...
...
output: {
path: function (name, hash) {
return path.resolve(__dirname, myMapOfFilenamesToDirs[name]);
},
filename: '[name].js'
},
有谁知道这是否可行,或者是否有可以完成此操作的现有插件?
编辑我不想使用多个配置条目(多编译器),因为我将无法再使用 CommonsChunkPlugin 在入口点之间创建共享文件
有点hacky,但这应该可以解决问题。
module.exports = {
entry: {
"somePage": "./scripts/someDir/somePage.js",
"someSubDir/anotherPage": "./scripts/someDir/someSubDir/anotherPage.js"
},
output: {
path: path.resolve(__dirname, 'out/someDir'),
filename: '[name].js'
},
// Etc.
}
您不能设置函数的路径,webpack 不会为您调用它。
您可以返回一组配置供 webpack 执行。 我认为这会给你足够的控制输出路径来实现你需要的。
我今天遇到了同样的问题,补充了@quentin-roy 的答案, https: //stackoverflow.com/a/33086806/6552940
您还可以使用glob
和以下回调为输入文件创建输出路径映射。 根据您的需要调整您的glob
模式。 以下模式和回调(如果应用于目录结构)
- src
- file01.ts
lib
- file02.ts
会导致
- dist
- file01.js
lib
- file02.js
config = {
entry: () => {
const entries = {};
glob.sync("./src/**/*.ts").forEach(filePath => {
entries[
path
.relative("./src", filePath)
.replace(path.extname(filePath), "")
] = filePath;
});
console.debug(
`Entries created:\n${JSON.stringify(entries, undefined, 4)}`,
);
return entries;
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
},
}
经过一些评估,我使用Webpack-watched-glob-entries-plugin有一段时间了,因为它很小, 可以满足我们的需求并且也可以在 watch 模式下工作。
如果您需要更多想法,请查看入口点中的通配符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.