webpack4-css样式处理

一 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不可同时使用, 尤其是在开发环境中实现热更新的情况下