css 兼容性處理

在 這里 display:flex 需要兼容性處理，webpack 編譯打包時，需要使用 postcss-loader 這個loader 和 postcss-preset-env 這個插件，它幫postcss找到package.json中browserslist里面的配置，通過配置加載指定的css兼容性樣式

首先，下載安裝  npm install --save-dev postcss-loader postcss-preset-env

webpack.config.js 配置：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//默認使用package.json中生產環境的兼容性配置，所以需要設置nodejs環境變量
//process.env.NODE_ENV = 'development'

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, //這個loader取代style-loader,將css從js中提取出來
                    'css-loader',
                    {
                        loader: 'postcss-loader', //css兼容性處理,修改loader的配置,使用默認配置的話直接 postcss-loader
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                require('postcss-preset-env')()  //postcss的插件
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'bundle.css' //對輸出的css文件進行重命名
        })
    ],
    mode: 'development'
}

package.json 中 browserslist 配置：

 打包后的 bundle.css可以看到兼容處理：

#box1{
    width:100px;
    height:100px;
    background-color: red;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
}
#box2{
    width:100px;
    height:100px;
    background-color: blue;
}

 關於 browserLists 配置：

https://github.com/browserslist/browserslist