webpack学习---css兼容性问题

2021-10-21 20:31:07 阅读：161 来源： 互联网

标签：浏览器 loader --- webpack env 兼容性问题 js postcss 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'
                };

标签：浏览器,loader,---,webpack,env,兼容性问题,js,postcss,css
来源： https://www.cnblogs.com/leiyanting/p/15435029.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack学习---css兼容性问题