一 css模块常用的loader:

• style-loader：通过注入style标签将CSS添加到DOM
• css-loader：css-loader使我们可以在程序中require CSS文件，将css文件当做模块来处理。同时也会遍历 CSS 文件，找到其中的@import与url（），当作css依赖的模块并处理它们。
• postcss-loader: 为css样式添加兼容性的浏览器厂商前缀
• less-loader：将less编译为css

二 将css抽取为单独的文件(webpack 4)

• 安装mini-css-extract-plugin

yarn add mini-css-extract-plugin复制代码

• 项目配置

{                test: /\.less?$/,                exclude: /src/,                use: [                    process.env.CODE_ENV !== 'online' ? 'style-loader' : MiniCssExtractPlugin.loader,                     {                        loader: 'css-loader',                        options: {                            minimize: true                        },                    },                     'postcss-loader',                     {                        loader: 'less-loader',                        options: {                            modifyVars: theme                        }                    }                ]            }复制代码

注意:

(1) 通过mini-css-extract-plugin插件, 是将css文件抽取出来为单独的文件, 在head头部以link方式引入

(2) 官方文档指出, 此插件一般应用于生产环境; 与style-loader不可同时使用, 尤其是在开发环境中实现热更新的情况下