webpack5零基础入门-15样式兼容性问题处理

1.下载相关依赖

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

2.在webpack.config.js中配置

注意：postcss-loader要在css-loader后面配置

 3.写一个flex布局，flex是存在一定的兼容性问题的

4.打包

可以看到打包后未被处理

1.下载相关依赖

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

2.在webpack.config.js中配置

注意：postcss-loader要在css-loader后面配置

3.写一个flex布局，flex是存在一定的兼容性问题的

4.打包

可以看到打包后未被处理

因为我们还要设置兼容到什么版本的浏览器

5.在pack.json中添加要兼容的浏览器

重新打包可以看到flex对ie进行了兼容处理 

6.完整代码

const path = require('path');//nodejs用来处理路径问题的模块
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackDevServer = require('webpack-dev-server');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    /**入口 */
    entry: './src/main.js',
    /**输出 相对路径*/
    output: {
        /**文件输出路径 绝对路径*/
        //__dirname 表示当前文件的文件夹目录
        path: path.resolve(__dirname, '../dist'),//所有文件的输出目录
        /**文件名 */
        filename: 'static/js/dist.js',//入口文件输出文件名
        clean: true,//在打包前将path整个目录内容情况

    },
    /**加载器 */
    module: {
        rules: [
            //loader的配置
            {
                /**test 代表要检测的文件 */
                test: /\.css$/, //只检测.css文件
                use: [MiniCssExtractPlugin.loader, 'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                'postcss-preset-env'
                            ]
                        }
                    }
                }
                ],//对检测到文件使用哪些loader

            },
            {
                test: /\.less$/,//只检测.less文件
                //loader:'xxx',loader只能使用一个loader，use可以使用多个loader
                use: [MiniCssExtractPlugin.loader, 'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                'postcss-preset-env'
                            ]
                        }
                    }
                },
                    'less-loader'],//对检测到文件使用哪些loader
            },
            {
                test: /\.s[ac]ss$/,//只检测.sass文件
                use: [MiniCssExtractPlugin.loader, 'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                'postcss-preset-env'
                            ]
                        }
                    }
                },
                    'sass-loader'],
            },
            {
                test: /\.styl$/,//只检测.stylus文件
                use: [MiniCssExtractPlugin.loader, 'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                'postcss-preset-env'
                            ]
                        }
                    }
                },
                    'stylus-loader']
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: 'asset/resource',
                parser: {
                    dataUrlCondition: {
                        //小于10kb的图标转base64，减少请求数量
                        maxSize: 10 * 1024 // 10kb
                    }
                },
                generator: {
                    //输出图片名称
                    //[hash:10]hash值取前10位
                    filename: 'static/imgs/[hash:10][ext][query]'
                }
            },
            /**图标字体相关配置 */
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,//只对ttf、woff2资源起作用
                type: 'asset/resource',//加上/resource表示将资源原封不动的打包出来
                generator: {
                    filename: "static/media/[hash][ext][query]"
                }
            },
            {
                test: /\.js$/,
                /**排除哪些文件 */
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                // options: {
                //     presets: ['@babel/preset-env'],
                // },
            },
        ]
    },
    /**插件 */
    plugins: [
        //plugin配置
        new ESLintPlugin({
            /** 检测哪些文件 */
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({
            /**模板 */
            template: path.resolve(__dirname, '../src/public/index.html')
        }),
        new MiniCssExtractPlugin({
            filename: 'static/css/main.css'
        })
    ],
    /**模式 */
    mode: 'production'
}