轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack的css 兼容性處理

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

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

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

// webpack.config.js webpack的配置文件
// 路徑： ./webpack.config.js
…………
    // 設置 nodejs 環境變量
    process.env.NODE_ENV = 'development';
…………

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

webpack.config.js配置文件做了以下兩處改動

改動1：添加 nodejs 環境變量設置

// 設置 nodejs 環境變量
process.env.NODE_ENV = 'development';

改動2：添加 處理 css 的 loader 配置

// 在處理 css 的 loader 配置的末端添加如下內容

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

1.2、修改package.json配置文件

// 在package.json配置文件中添加如下信息
// 如需復制粘貼，請刪除注釋 

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

二、安裝loader和插件

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

三、運行

> webpack