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

Heartbroken_man

已于 2022-02-14 11:25:34 修改

阅读量844

点赞数

分类专栏： webpack 文章标签： webpack

于 2021-08-30 21:47:24 首次发布

本文链接：https://blog.youkuaiyun.com/Heartbroken_man/article/details/120001410

版权

本文介绍如何通过webpack配置，解决打包后js的es6语法在部分浏览器报错，以及css缺少浏览器厂商前缀的问题。通过babel-loader、@babel/preset-env和postcss-loader、postcss-preset-env等工具，实现js的polyfill处理和css的自动添加浏览器前缀功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们在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: [