Webpack：为目录中的每个文件创建一个包答案

【问题标题】：Webpack: Create a bundle with each file in directoryWebpack：为目录中的每个文件创建一个包
【发布时间】：2015-08-29 08:36:51
【问题描述】：

我正在尝试在 webpack 中捆绑每个 Angular 模块。我的目标是有一个 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.js 中需要home.html，所以当我加载home.js 时，所有需要的文件都会加载。问题是我有几个组件，比如home，我想告诉 webpack 分别捆绑每个组件，并用它的包含文件夹命名它，比如home。

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

【问题讨论】：

标签： javascript angularjs webpack

【解决方案1】：

更简单的方法：

在您的 webpack.config.js 中使用 glob：

这是一个例子：

var glob = require("glob");

module.exports = {
  entry: {
     js: glob.sync("./app/components/**/*.js"),  
  }
}

【讨论】：

虽然接受的答案使用开箱即用的工具，但这是迄今为止最简单的，也是我首选的答案。
确保先用 npm 安装 webpack-glob。 npm install webpack-glob --save-dev
谁能展示整个webpack.config.js 文件的样子？例如，output 的值应该是什么？

【解决方案2】：

你可以这样实现你想要的：

entry: {
    home: './app/app.js',
    page: './page/app.js',
},
output: {
    path: './build/ClientBin',
    filename: '[name].js',
},

这将在您的输出路径中生成home.js 和page.js。调整，根据需要进行概括。您可能希望将这些入口路径提取到变量等。

请注意，通过一些调整，您可能能够将捆绑包准确地输出到您想要的位置。我希望您随后会使用path，例如./app/components/[name] 左右。

【讨论】：

问题是我不知道我会有多少条目。我已经编辑了问题以显示我的解决方法，但我正在寻找一个开箱即用的解决方案。
您的解决方案对我来说看起来不错。作为一个配置驱动的工具，Webpack 并不真正关心你如何生成配置，只要它是正确的。
听起来合乎逻辑！那么我该如何完成这个问题的工作流程呢？我的意思是我必须把编辑过的部分放到答案中？

【解决方案3】：

要单独导出每个文件，您可以使用以下代码 sn-p 来执行此操作：

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')
  }
}

【讨论】：

【解决方案4】：

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

然后在config中使用entry变量。

【讨论】：