webpack学习---生产模式--css兼容性问题

css兼容性处理  需要npm下载 postcss-loader postcss-preset-env  postcss需要配置loading(module)

 

 

                            // 在package.json中写以下代码

                            css兼容性处理：postcss --> postcss-loader postcss-preset-env

                            postcss-preset-env帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

                            "browserslist": {

                            // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development

                           

                            "development": [

                                // 兼容最近的谷歌浏览器

                                "last 1 chrome version",

                                // 兼容最近的火狐浏览器

                                "last 1 firefox version",

                                // 兼容最近的苹果浏览器

                                "last 1 safari version"

                            ],

                            // 生产环境：默认是看生产环境

                            "production": [

                                // 兼容大于百分之20的浏览器

                                ">0.2%",

                                // 不要兼容已经几乎没人用的浏览器

                                "not dead",

                                // 不兼容op——mini浏览器

                                "not op_mini all"

                            ]

                            }

 

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


                // 基本情况下mini-css-extract-plugin插件会默认以生产环境的要求转换代码，需要如下设置转换为开发环境
                // 设置nodejs环境变量
                // process.env.NODE_ENV = 'development';


                module.exports = {
                entry: './src/js/index.js',
                output: {
                    filename: 'js/built.js',
                    path: resolve(__dirname, 'build')
                },
                module: {
                    rules: [
                    {
                        test: /\.css$/,
                        use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',


                        //设置css兼容性
                        // 使用loader的默认配置
                        // 'postcss-loader',
                        // 修改loader的配置
                        {
                            loader: 'postcss-loader',
                            options: {
                            postcssOptions: {
                                plugins: [
                                [
                                    "postcss-preset-env"
                                ],
                                ],


                                // parser: "postcss-js",
                            },
                            // execute: true,
                            },
                        }
                        ]
                    }
                    ]
                },
                plugins: [
                    new HtmlWebpackPlugin({
                    template: './src/index.html'
                    }),
                    new MiniCssExtractPlugin({
                    filename: 'css/built.css'
                    })
                ],
                mode: 'development'
                };