Webpack：使用目录中的每个文件创建捆绑

一尘不染

Webpack：使用目录中的每个文件创建捆绑

angularjs

我正在尝试将webpack中的每个角度模块捆绑在一起。我的目标是拥有一个app.js，它将通过以下配置与webpack捆绑在一起：

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

我将这个捆绑脚本放到我的index.html中，这样它将成为我应用程序的入口。我的./app/components文件夹中也有很多模块。文件夹结构如下：

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

我已要求这样做home.html，home.js所以当我加载home.js其所有需要的文件时，都将加载。问题是我有几个类似的组件home，我想告诉webpack分别捆绑每个组件，并用其包含的文件夹命名它home。

我如何配置webpack来创建这些捆绑包并将其放入./build/components？

阅读 224

2020-07-04

共1个答案

一尘不染

我最终以编程方式定义了条目。我在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";
}

然后entry在配置中使用变量。

2020-07-04