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

Question

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

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

更简单的方法：

在你的 webpack.config.js:

中使用 glob

这是一个例子：

var glob = require("glob");

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

Answer 4

要单独导出每个文件，您可以使用以下代码片段：

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

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

Webpack: Create a bundle with each file in directory

javascript

angularjs

webpack