如果未通过动态导入声明mini-css-extract-plugin，则不会加载CSS

问题描述

我有一个非常基本的webpack + mini-css-extract-plugin项目（您可以找到它here）。

这里是webpack.config.js：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    resolve: {
        modules: [path.resolve(process.cwd(),'node_modules')]
    },module: {
        rules: [
            // file loader allows to copy file to the build folder and form proper url
            // usually images are used from css files,see css loader below
            {
                test: /\.png$/,exclude: /node_modules/,use: [
                    {
                        loader: 'file-loader',options: {
                            name: "_assets/[name].[ext]"
                        }
                    }
                ]
            },// css files are processed to copy any dependent resources like images
            // then they copied to the build folder and inserted via link tag
            {
                test: /\.css$/i,sideEffects: true,// for tests we use simplified raw-loader for css files
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,options: {
                            // public path has changed so url(...) inside css files use relative pathes
                            // like: url(../_assets/image.png) instead of absolute urls
                            publicPath: '../',}
                    },'css-loader'
                ]
            }
        ]
    },plugins: [
        // plugin helps to properly process css files which are imported from the source code
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '_assets/[name].css',chunkFilename: '_assets/[id].css'
        })
    ],entry: {
        'test': "./src/test"
    },output: {
        path: path.resolve(process.cwd(),`public`),publicPath: '',filename: '[name].js',chunkFilename: '_chunks/chunk.[name].js'
    }
};

主条目文件test.js：

import './css/testCss.css';

console.log('Loaded');

当我运行webpack build时，我得到以下输出结构：

/
|-test.js
|-_assets/
| |-test.css

当我将此js捆绑包包含到html中时，我希望test.js捆绑包会动态加载test.css文件，但事实并非如此-js捆绑包可以正常工作，但CSS文件根本不会加载。 / p>

仅当我像这样修改test.js的源代码时才加载它：

import('./css/testCss.css');  // <--------- NOTE: dynamic import here

console.log('Loaded');

在这种情况下，构建Webpack后我得到以下输出：

/
|-test.js
|-_assets/
| |-0.css
|-_chunks/
| |-chunk.0.js

当我以html格式加载此js捆绑包时，它同时加载chink.0.js和0.css

主要问题：动态导入是通过mini-css-extract-plugin将CSS包含到我的js文件中的唯一正确方法吗？

因为他们在文档中说您使用的是常规静态导入，例如import "./test.css"

我的环境信息：

node version: v14.12.0
webpack version: 4.44.1 (also tested on 5.2.0)
mini-css-extract-plugin version 1.1.2

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）