Webpack：使用目录中的每个文件创建一个包 [英] Webpack: Create a bundle with each file in directory

问题描述

我正在尝试捆绑webpack中的每个角度模块。我的目标是有一个app.js将由webpack与这个配置捆绑在一起：

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:

entry: {
        app: "./app/app.js"
},
output: {
        path: "./build/ClientBin",
        filename: "bundle.js"
},

我会将此捆绑脚本放在我的index.html中，这样它就会进入点我的应用程序
此外，我在 ./ app / components 文件夹中有许多模块。文件夹结构如下：

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/components folder. Folder structure in like:

app
|--components
|  |
|  |--home
|  |  |
|  |  |--home.html
|  |  |--home.js
|--app.js
|--AppController.js

我在 home.js 中需要 home.html 所以当我加载 home.js 将加载所有需要的文件。
问题是我有几个组件，比如 home ，我想告诉webpack分别捆绑每个组件，并用它包含的文件夹命名，如 home 。

I have required home.html in home.js so when I load home.js all of its needed files will load. The problem is I have several components like home and I want to tell webpack to bundle each component separately and name it with its containing folder like home.

如何配置webpack来创建这些包并将它们放入 ./ build / components ？

How can I config webpack to create these bundles and put them in ./build/components?

推荐答案

我最终以编程方式定义条目。我在webpack.config.js中写了这个：

I ended up defining entries programmatically. I wrote this in my 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 entry variable in config.

这篇关于Webpack：使用目录中的每个文件创建一个包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！