9、css兼容性处理

1、这里用到 postcss 和 postcss-preset-env postcss-loader

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

postcss-preset-env 为 postcss 的 预设环境

postcss 相当于一个启动器，里面可以装各种 插件 如 postcss-preset-env（预设环境） 和 autoprefixer(自动前缀)

文件结构

2、 a.css 文件写上有兼容性的样式

#box2 {
    background-color: brown;
    height: 50px;
    width:50px;
    display: flex;
    backface-visibility: hidden;
}

3、webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader的配置
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env"
                  ],
                ],
              },
            },
          }
        ]
      }
    ]
  },

如果参考博客的写法报错了，请移步官网 搜 postcss-loader 的最新写法

 官方的写法

 

4、在 package.json 中配置 browserslist

"browserslist": {
    "development": [
      "last 1 chrome version",//兼容最近的谷歌浏览器
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.01%",//兼容>0.01%
      "not dead",//不用管弃用的浏览器
      "not op_mini all"//不用op
    ]
  }

browserslist 的具体配置 移步 github 上

Browserslist这个东西单独是没用的，（补充: 在vue官方脚手架中，browserslist字段会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

 

package.json 中 browserslist 的开发环境或生产环境的选择 是在 nodejs 中配置的，不是在 webpack.config.js 的 mode 中配置的。

 

webpack.config.js 中配置 nodejs 的环境

//设置 nodejs 中的环境变量, 默认为 production 开发环境
process.env.NODE_ENV = 'development';

 

---

 

另外，我在webpack官网中看到  Autoprefixer 这种神奇的东西

Autoprefixer 翻译过来就是 自动前缀，一看名字就是做 css 兼容的

所以一下面用 autoprefixer 来做 css 的兼容，

先安装 依赖 postcss postcss-loader

npm install --save-dev autoprefixer

来至官网的警告:warning: postcss-preset-env includes autoprefixer, so adding it separately is not necessary if you already use the preset.

postcss 预设环境包含 autoperfixer 了， 所以你使用了 预设环境 则不需要单独添加 自动前缀了

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { importLoaders: 1 },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

 browserslist 和 预设环境一样配置