javascript Webpack：为目录中的每个文件创建一个包
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30818236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack: Create a bundle with each file in directory
提问by alisabzevari
I am trying to bundle every angular module in webpack. My target is to have one app.js that will be bundled by webpack with this configuration:
我试图在 webpack 中捆绑每个 angular 模块。我的目标是拥有一个 app.js，它将被 webpack 与此配置捆绑在一起：
entry: {
app: "./app/app.js"
},
output: {
path: "./build/ClientBin",
filename: "bundle.js"
},
I will place this bundle script in my index.html so it will entry point of my app.
Also I have many modules in ./app/componentsfolder. Folder structure in like:
我将把这个包脚本放在我的 index.html 中，这样它就会成为我的应用程序的入口点。另外我在./app/components文件夹中有很多模块。文件夹结构如下：
app
|--components
| |
| |--home
| | |
| | |--home.html
| | |--home.js
|--app.js
|--AppController.js
I have required home.htmlin home.jsso when I load home.jsall of its needed files will load.
The problem is I have several components like homeand I want to tell webpack to bundle each component separately and name it with its containing folder like home.
我有要求home.html，home.js所以当我加载home.js它需要的所有文件时都会加载。问题是我有几个组件，例如home，我想告诉 webpack 分别捆绑每个组件并使用其包含的文件夹命名它，例如home.
How can I config webpack to create these bundles and put them in ./build/components?
我如何配置 webpack 来创建这些包并将它们放入./build/components？
采纳答案by alisabzevari
I ended up defining entries programmatically. I wrote this in my webpack.config.js:
我最终以编程方式定义了条目。我在我的 webpack.config.js 中写了这个：
function getDirectories(srcpath) {
return fs.readdirSync(srcpath).filter(function (file) {
return fs.statSync(path.join(srcpath, file)).isDirectory();
});
}
var entry = {
app: "./app/app.ts",
vendor: ["angular", "oclazyload", "angular-new-router", "lodash"]
};
var components = getDirectories("./app/components");
for (var i = 0; i < components.length; i++) {
entry[components[i]] = "./app/components/" + components[i] + "/" + components[i] + ".ts";
}
And then used entryvariable in config.
然后entry在配置中使用变量。
回答by David
A simpler way:
一个更简单的方法：
Use globs in your webpack.config.js:
在您的webpack.config.js: 中使用 globs
Here's an example:
下面是一个例子：
var glob = require("glob");
module.exports = {
entry: {
js: glob.sync("./app/components/**/*.js"),
}
}
回答by Juho Veps?l?inen
You can achieve what you want like this:
你可以像这样实现你想要的：
entry: {
home: './app/app.js',
page: './page/app.js',
},
output: {
path: './build/ClientBin',
filename: '[name].js',
},
This will generate home.jsand page.jsat your output path. Tweak, generalize as needed. You'll probably want to extract those entry paths to a variable and so on.
这将在您的输出路径中生成home.js和page.js。调整，根据需要进行概括。您可能希望将这些入口路径提取到变量等等。
Note that with a bit of tweaking you are likely able to output the bundles exactly where you want. I expect you would then use a pathlike ./app/components/[name]or so.
请注意，通过一些调整，您可能能够准确地将包输出到您想要的位置。我希望你会使用path类似的东西./app/components/[name]。
回答by Acidic9
To have each file exported individually, you can use the following code snippet to do so:
要单独导出每个文件，您可以使用以下代码片段来执行此操作：
const glob = require('glob')
const path = require('path')
const entryFiles = glob.sync('./app/components/**/*.js').reduce((previousValue, currentValue, currentIndex, array) => {
return typeof previousValue === 'string' ?
{
[path.basename(previousValue, path.extname(previousValue))]: previousValue,
[path.basename(currentValue, path.extname(currentValue))]: currentValue
}
:
{ ...previousValue, [path.basename(currentValue, path.extname(currentValue))]: currentValue }
})
module.exports = {
entry: entryFiles,
resolve: {
extensions: [ '.js' ]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'build', 'ClientBin')
}
}
