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

问题描述

我试图在 webpack 中捆绑每个 angular 模块.我的目标是拥有一个 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";
}

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

And then used entry variable in config.

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