Webpack自动从节点模块

Question

TL; DR：有没有办法从我们的node_modules文件夹中自动扫描或自动导入我们的Web包使用的所有样式表？

我正在开发一个使用angularJS作为其MVC框架的项目，我们目前正在迁移以使用webpack。我目前编写了以下配置：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const bbProperties = require('./webpack.properties');
const appRoot = __dirname + "/../../..";

console.log('__dirname:', __dirname);

module.exports = {
    entry: {
        app: appRoot + bbProperties.app.entryScript,
        login: appRoot + bbProperties.login.entryScript
    },
    output: {
        path: appRoot +  bbProperties.distFolder,
        publicPath: "dist",
        filename: "js/[name].bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2017']
                }
            },
            {
                test: /\.css$/,
                //exclude: /node_modules/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader', query: {importLoaders: 1}},
                    {loader: 'postcss-loader', query: {config: {path: __dirname+'/postcss.config.js'}}}
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name:'[name].[ext]',
                            outputPath:"/assets/images/"
                        }
                    }
                ]
            },
            {
                test: /\.(ttf|eot|woff|woff2|svg)($|\?.*$)/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name:'[name].[ext]',
                            outputPath:"/assets/fonts/"
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            moment: "moment"/*,
            _: "lodash",
            "window._": "lodash",
            angular: "angular"*/
        }),
        //Creates an html file with all bundles injected as <script> tags
        new HtmlWebpackPlugin({
            chunks: ['app'],
            filename: '../angular-app/menu/' + bbProperties.app.outputFile,
            hash: "true", //cache busting
            template: appRoot + bbProperties.app.location + "/" + bbProperties.app.inputFile
        }),
        //Second html bundle for login page
        new HtmlWebpackPlugin({
            chunks: ['login'],
            filename: '../'+bbProperties.login.outputFile,
            hash: "true", //cache busting
            template: appRoot + bbProperties.login.location + "/" + bbProperties.login.inputFile
        })
    ],
    stats: {colors: true},
    devtool: 'source-map',
    node: {
        fs: "empty"
    }
};

据我了解，webpack将从每个条目文件开始创建一个包，并在递归中添加它在import语句中遇到的任何文件。

我也理解我可以从我的node_modules目录中获取一个包，并且在这种情况下，webpack将搜索package.json文件并导入该文件的'main'属性中指定的文件。

让我们说我们依赖于几个包，组件和框架（例如：angular-ui-grid，angular-material等...），我知道我可以通过导入它们来使用css加载器手动导入他们的CSS文件我的JS代码。

有没有办法从我们的node_modules文件夹中自动扫描或自动导入这些包使用的所有样式表？