Webpack（八）：css兼容性处理、node环境 process.env.NODE_ENV

安装：

​​npm i postcss postcss-loader postcss-preset-env -D​​

• ​​postcss-preset-env​​作用：

• 帮助​​postcss​​​ 找到​​package.json​​​ 中​​browserslist​​​ 里面的配置,通过配置​​加载指定css兼容性样式​​

// package.json 具体详见百度browserslist
"browserslist": {
    // 开发环境
    "development": [
        "last 1 chrome version",        // 兼容chrome最近版本
        "last 1 firefox version",       // 兼容firebox最近版本
        "last 1 safari version"         // 兼容safari最近版本
    ],
    // 生产环境
    "production": [
        ">0.1%",                        // 兼容99.9%的浏览器
        "not dead",                     // 不要已经死了的浏览器
        "not op_mini all"               // 不要op_mini的全部
    ]
}

• ​​package.json​​​默认运行的是​​production​​​ 环境参数，需要修改环境变量来改变其运行的环境，通过​​node​​的环境变量参数进行修改

• 修改内容放在​​webpack.config.js​​​文件中：​​process.env.NODE_ENV = 'development';​​

• ​​webpack.config.js​​ 配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

process.env.NODE_ENV = 'development';

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    },

    plugins: [

        new MiniCssExtractPlugin({
            filename: 'css/main.css'
        }),

    ],

}

• webpack配置文件同级创建​​postcss.config.js​​ 文件

module.exports = {
    plugins: [
        //使用postcss插件
        require('postcss-preset-env')
    ]
}

变化