在 webpack 2 条目中指定一个完整的子目录答案

【问题标题】：specifying a complete sub directory in webpack 2 entry在 webpack 2 条目中指定一个完整的子目录
【发布时间】：2017-08-21 21:58:06
【问题描述】：

我有一个 webpack 2 配置如下：

module.exports = {
    context: __dirname,
    entry: [
        "./app.ts",
        "./tab.ts",
        "./client/clientService.ts",
        "./client/clientSearchComponent.ts",
        "./infrastructure/messageComponent.ts",
        "./infrastructure/typeaheadComponent.ts",
        "./url.ts"],
    output: {
        filename: "./wwwroot/js/admin/admin.js"
    },
    devtool: "source-map",
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader' }
        ]
    }
};

这被导入到一个 gulp 任务中，如下...

gulp.task("admin:js",
    function (done) {
        var configuration = require(path.join(__dirname, config.js, "admin/webpack.config.js").toString());
        webpack(configuration).run(reportWebpackResults(done));
    });

我发现我必须在entry[...] 中指定每个组件。

我如何指定 glob，它们似乎不能开箱即用。

entry: [
    "./client/**/*.ts", // module not found...

【问题讨论】：

标签： javascript typescript webpack webpack-2

【解决方案1】：

您可以使用像globule 这样的全局库。 globule.find 返回文件数组。所以你可以用它作为入口：

entry: globule.find("./client/**/*.ts")

如果您还想包含其他入口点，您可以通过扩展返回的数组来组合它们：

entry: [
    './other/entry.js'
    ...globule.find("./client/**/*.ts")
]

或使用任何其他组合数组的方式（例如Array.prototype.concat）。

或者，您可以使用单个条目在require.context 的帮助下导入您需要的所有内容，如问题webpack require every file in directory 中所示。

const req = require.context('./client/', true, /\.ts$/);
req.keys().forEach(req);

【讨论】：