动态导入angularjs + webpack

Question

我正在尝试为angularjs项目实现Webpack4。我创建了一些入口点，对于静态导入，它们可以按预期工作。但是在项目中，我们有一些着陆页及其文件夹，它们具有相同的名称（“ 1300”，“ 1520”）等，其中包括着陆页css和html文件。因此，如果我们使用“ ...？theme = 1520”之类的网址，则会使用“ 1520”文件夹中的html和css（以及常规样式和html）。现在我有3个webpack捆绑包，分别用于自定义js，供应商js和一般的CSS。 因此，我尝试根据url参数动态导入登录页面css和html。当然，即使使用了我在各处都能找到的所有插件和解决方案，它也无法正常工作。现在的主要目标是将着陆页CSS样式动态插入CSS捆绑包中（ css.js ）。谢谢！

webpack.config.js：

const webpack = require("webpack");
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require('cssnano');
const TerserPlugin = require('terser-webpack-plugin');
const ImageminWebpWebpackPlugin = require("imagemin-webp-webpack-plugin");
const { nodeName } = require("jquery");


module.exports = {
    target: 'node',
    //mode: 'production',
    context: path.resolve(__dirname, 'WebContent'),
    entry: {
        custom: './js/app.js',
        styles: './js/css.js',
        vendor: './js/vendor.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].bundle.js'
        //,publicPath: 'build'
    },
    plugins: [new MiniCssExtractPlugin(),
    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.bundle\.css$/g,
        cssProcessor: cssnano,
        cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
        },
        canPrint: false
    }),
    new ImageminWebpWebpackPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-syntax-dynamic-import']
                  }
                }
              },
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: './WebContent',
                        esModule: true
                    }
                }, {
                    loader: 'css-loader',
                    options: {
                        import: true,
                        //modules: true
                    }
                }]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'images/',
                        publicPath: path.resolve(__dirname, './build/images/'),
                        //emitFile: false
                    }
                },
                    'url-loader?limit=100000']
            }
        ]
    },
    optimization: {
        splitChunks: {
            //    chunks: 'all',
            cacheGroups: {
                styles: { 
                    name: 'styles.bundle',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true,
                    minChunks: 1
                }
            }
        }
        ,
        minimize: true,
        minimizer: [new TerserPlugin({
            extractComments: false,
            exclude: /\/node_modules/,
            terserOptions: {
                keep_fnames: true,
                mangle: false
            },
        })]
    }
};

css.js：

var BORDER_SCREEN_WIDTH_VALUE = 768;
var device = 'mobile';
var path = '';
var lpNumber = new RegExp('[\?&]theme=([^&#]*)').exec(window.location.search)[1];
if (window.innerWidth > BORDER_SCREEN_WIDTH_VALUE) {
    device = 'desktop';
}

path = '/' + lpNumber + '/' + device + '/';
console.log(path);
import(/* webpackIgnore: true */'../WebContent/LP' + path + 'style.css').then((module) => { 
    module();
});

require('../css/amazing-theme.min.css');
require('../css/general.min.css');
require('../css/leadgen-theme.min.css');
require('../css/partials.min.css');
require('../css/style-all.min.css');
//require('../LP/1138/desktop/style.css');