在webpack 2条目中指定完整的子目录

问题描述

我的webpack 2配置如下:

I have a webpack 2 configuration as follows:

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任务中，如下所示...

This is imported into a gulp task as follows...

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 [...] 中指定每个组件.

I am finding that I have to specify each component in entry[...].

我如何指定glob，它们似乎不是开箱即用的.

How do I specify globs, they don't seem to work out of the box.

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

推荐答案

您可以使用glob库，例如小球. globule.find 返回文件的数组.因此，您可以将其用作条目:

You can use a glob library like globule. globule.find returns an array of the files. So you can use it as the entry:

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

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

If you want to include other entry points as well you can combine them by spreading the returned array:

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

或使用任何其他组合数组的方式(例如 Array.prototype.concat ).

Or use any other way of combining the arrays (e.g. Array.prototype.concat).

或者，您可以使用单个条目，借助 require.context ，如问题.

Alternatively you can use a single entry that imports everything you need with the help of require.context as shown in the question webpack require every file in directory.

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

这篇关于在webpack 2条目中指定完整的子目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！