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不可同時使用, 尤爲是在開發環境中實現熱更新的狀況下