轉(zhuǎn)載請(qǐng)注明 來(lái)源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack的css 兼容性處理

處理 css 兼容性需要使用到 postcss-loader 和postcss-preset-env 兩個(gè)插件

一、css 兼容性處理核心配置

1.1、修改webpack.config.js 配置文件

// webpack.config.js webpack的配置文件
// 路徑： ./webpack.config.js
…………
    // 設(shè)置 nodejs 環(huán)境變量
    process.env.NODE_ENV = 'development';
…………

	// loader的配置
    module: {
        rules: [
            //打包 css 文件的詳細(xì)loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader進(jìn)行處理
                use: [
                    // use數(shù)組中l(wèi)oader執(zhí)行順序:從右到左,從下到上依次執(zhí)行
                    //創(chuàng)建style標(biāo)簽,將js中的樣式資源插入進(jìn)行,添加到head中生效
                    //'style-loader',
                    //這個(gè)loader取代style-loader。作用:提取js中的css成單獨(dú)文件
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // 這里可以指定一個(gè) publicPath
                            // 默認(rèn)使用 webpackOptions.output中的publicPath
                            // 這里如果注釋掉是因?yàn)槲唇ocss文件單獨(dú)分配文件夾,無(wú)需進(jìn)行路徑調(diào)整
                            publicPath: '../'
                        },
                    },
                    //將css文件變成commonjs模塊加載js中,里面內(nèi)容是樣式字符串
                    'css-loader',
                    /*
                   css兼容性處理: postcss --> postcss-loader postcss-preset-env
                   postcss-preset-env的作用是幫postcss找到package.json中browserslist里面的配置,
                   通過(guò)配置加載指定的css兼容性樣式，可以在 github上找到 browserslist 的更多配置。
                   以下舉例應(yīng)該在package.json 配置的內(nèi)容。
                   ========package.json  文件 begin=========
                                   "browserslist":{
                                       //開(kāi)發(fā)環(huán)境-->設(shè)置node環(huán)境變量: process.env.NODE_ENV = development
                                       "development":[
                                           "last 1 chrome version",
                                           "last 1 firefox version",
                                           "last 1 safari version",
                                           "ie 9-12"
                                       ],
                                       //生產(chǎn)環(huán)境：默認(rèn)是生產(chǎn)環(huán)境
                                       "production":[
                                           ">0.2%",
                                           "not dead",
                                           "not op_mini all"
                                       ]
                                   },
                    ========package.json  文件 end=========
                   */
                    //使用loader的默認(rèn)配置
                    //'postcss-loader"
                    //修改loader的配置
                    {
                        loader: 'postcss-loader',
                        options: {
                                ident: 'postcss',
                                plugins: () => [
                                    // postcss的插件
                                    require('postcss-preset-env')()
                                ]
                        }
                    }
                ]
            },
            …………
        ]
    },

webpack.config.js配置文件做了以下兩處改動(dòng)

改動(dòng)1：添加 nodejs 環(huán)境變量設(shè)置

// 設(shè)置 nodejs 環(huán)境變量
process.env.NODE_ENV = 'development';

改動(dòng)2：添加 處理 css 的 loader 配置

// 在處理 css 的 loader 配置的末端添加如下內(nèi)容

//css兼容性處理: postcss --> postcss-loader postcss-preset-env
//幫postcss找到package.json中browserslist里面的配置,通過(guò)配置加載指定的css兼容性樣式
//使用loader的默認(rèn)配置
//'postcss-loader"
//修改loader的配置
   
{
    loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
            ]
        }
}

1.2、修改package.json配置文件

// 在package.json配置文件中添加如下信息
// 如需復(fù)制粘貼，請(qǐng)刪除注釋 

"browserslist": {
    //開(kāi)發(fā)環(huán)境下的瀏覽器兼容配置
    "development": [
        //兼容最后一個(gè)版本的 谷歌瀏覽器
        "last 1 chrome version",
        //兼容最后一個(gè)版本的 火狐瀏覽器
        "last 1 firefox version",
        //兼容最后一個(gè)版本的 mac 瀏覽器
        "last 1 safari version",
        //兼容 ie 9到 ie12
        "ie 9-12"
    ],
    //生產(chǎn)環(huán)境下的瀏覽器兼容配置
    "production": [
        //兼容99.8%的瀏覽器
        ">0.2%",
        //不要兼容已經(jīng)死掉的瀏覽器比如 IE6
        "not dead",
        //不要兼容op_mini 瀏覽器
        "not op_mini all"
    ]
},

二、安裝loader和插件

//安裝postcss-loader和postcss-preset-env
> npm i postcss-loader postcss-preset-env -D

三、運(yùn)行

> webpack