webpack配置--css和js兼容不同浏览器

首先我们在index.js这个入口文件里面内容如下

和另外两个引入的api文件和scss文件如下：

可以看到是有兼容性的js和css

 

我的loader配置如下 

需要安装babel-loader、@babel/preset-env、mini-css-extract-plugin、css-loader、sass-loader

module: {
        rules: [
            // babel-polyfill已经被移除了
            {
                test: /\.(js|jsx)$/,
                // use:'babel-loader',
                use: {
                    loader: 'babel-loader',
                    // es6转es5
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "modules": false
                                }
                            ]
                        ]
                    }
                },
                
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    MiniCssExtractPlugin.loader,//提取到单独文件需要结合 optimization配置
                    'css-loader',
                    'sass-loader'
                ]
            }
        ],
    },

如果对webpack的基础配置还不清楚的话可以参考一下我另外一篇基础文章或者其他博主的文章先

 我们打包一下可以看到打包完的js是还是采用es6语法

 所以难免在某些浏览器会报错

 而且可以看到打包完的样式是没加浏览器厂家前缀的

修改一下babel-loader配置

由于新版本babel-polyfill已经被移除了，所以采用@babel/plugin-transform-runtime加上corejs 3版本提供的内置函数来处理。

配置需要安装@babel/plugin-transform-runtime、@babel/runtime-corejs3、@babel/runtime依赖

这里我查babel的官网查的需要用到corejs第3版本才行具体可以参考一下官网@babel/plugin-transform-runtime · Babel 中文网

注意：配置exclude: 'node_modules',必须排除掉node_modules否则会冲突到其他loader

            {
                test: /\.(js|jsx)$/,
                // use:'babel-loader',
                use: {
                    loader: 'babel-loader',
                    
                    // es6转es5
                    options: {
                        exclude: 'node_modules',//必须排除掉node_modules否则会冲突到其他loader
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "modules": false
                                }
                            ]
                        ],
                        plugins: [
                            [
                              "@babel/plugin-transform-runtime",
                              {
                                // corejs 3版本提供的内置函数，例如Promise,Set和Map，不然部分浏览器不兼容
                                "corejs": {
                                  "version": 3,
                                  "proposals": true
                                },
                                "useESModules": true
                              }
                            ]
                          ]
                    }
                },
                
            },

重新打包一下在360浏览器兼容模式下，发现已经能正常输出来了

 查看一下打包后的代码，发现内部帮我们生成了一个Promise 。fn这个箭头函数也被编译成普通函数。

 我们来修改一下css的配置

需要安装依赖postcss-loader、postcss-preset-env，可能还只需要安装autoprefixer

详情可参考一下webpack的postcss-loader配置

           {
                test: /\.s[ac]ss$/,
                use: [
                    MiniCssExtractPlugin.loader,//提取到单独文件需要结合 optimization配置
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ['postcss-preset-env'],
                            },
                        },
                    },
                    'sass-loader'
                ]
            },

打包完后发现已经自动加上浏览器厂家前缀

 ok，到此就已经完成了js和css的不同浏览器兼容了