Webpack从节点模块自动导入css

TL; DR:有没有什么办法可以从我们的node_modules文件夹中自动扫描或自动导入我们的networking包使用的所有样式表?

我正在使用angularJS作为其MVC框架的项目,我们正在进行迁移到使用webpack的过程。 我目前写了以下configuration:

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将从每个入口文件开始创build一个bundle,recursion地添加在import语句中遇到的任何文件。

我也明白,我可以从我的node_modules目录需要一个包,并且在这种情况下,webpack将searchpackage.json文件并导入在该文件的“main”属性中指定的文件。

可以说,我们依赖于几个包,组件和框架(例如:angular-ui-grid,angular-material等),我知道我可以使用css加载器手动导入他们的CSS文件,通过导入到我的JS代码。

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