核心样式处理 - css 兼容性 - 《webpack 5 专题》

背景
webpack 5 实现
webpack 4 实现

css 兼容性实际上就是根据不同的浏览器内核添加不同的识别前缀。

背景

不同浏览器，不同版本之间css属性存在差异，用 css 前缀来指定特定的内核。

-moz-，代表firefox浏览器的私有属性；
-ms-，代表ie浏览器的私有属性
-webkit-，代表safari、chrome浏览器的私有属性；
-o-，代表Opera浏览器的私有属性。
webpack 5 实现
package.json 配置
在 webpack 5 中需要配置浏览器版本（browserslist）列表
```
{
"browserslist":{
  "development":[
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],
  "production":[
    ">0.2%"
  ]
}
}
```
css 文件
我们找一个需要转换的属性，如 transform ```css body { background: red; }

.index { color: blue; transform: rotate(-45deg); }

.orange { color: orange; }

下面是没有做兼容处理时的效果<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/1584826/1657102136942-c329f40b-bd56-4974-a62c-788b01e0e468.png#clientId=u7e344423-cfee-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=811&id=uf3663861&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1622&originWidth=2370&originalType=binary&ratio=1&rotation=0&showTitle=false&size=597818&status=done&style=none&taskId=u5f88d93a-f322-4f9e-be32-bd46e4689f6&title=&width=1185)
<a name="WDB5L"></a>
### 安装依赖
webpack 5 和 webpack 4 不一样，我们需要 postcss-loader 和 postcss-preset-env 两个包，不需要再额外安装 prefixer 包，postcss-preset-env 中集成了这个包。
```shell
yarn add postcss-loader postcss-preset-env --dev

配置 postcss.config.js

postcss.config.js 默认在根目录下

/** ./psotcss.config.js **/
let postcssPresetEnv = require('postcss-preset-env');
module.exports = {
  plugins: [
    postcssPresetEnv({
      browsers: 'last 5 version'
    })
  ]
}

配置 webpack.config.js

只需要添加下 post-loader 就行，如下：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  devServer: {
    port: 8080,
    open: true,
    compress: true,
    static: './dist',
  },
  entry: {
    index: './src/index.js'
  },
  output:{
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[hash:8].js'
  },
  resolve:{
    alias: {
      '@':path.resolve('src')
    }
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        use:[
          'style-loader',
          { 
            loader:'css-loader',
          },
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.CleanPlugin(),
    new HtmlWebpackPlugin({
      filename:'index.html',
      inject: 'body',
      template:'./public/index.html'
    })
  ]
}

这样打包过后我们再来看一下页面，发现已经对浏览器进行了兼容

webpack 4 实现

设置属性

设置一个需要前缀的属性（有的属性很通用，不需要前缀），如下：

/** ./src/index.css **/
.cc {
    transform: rotateY(45deg);
}

安装依赖

通过 postcss-loader 和 prefixer 两个npm 包来实现。

yarn add postcss-loader autoprefixer --dev

配置webpack

在匹配 css 文件的 loader 中加入 postcss-loader，并将 autoprefixer 加入postcss-loader 的插件中，如下：

let path = require('path');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let HtmlWebpackPlugin = require('html-webpack-plugin');

let htmlPlugins = ['index'].map(chunkName => {
  return new HtmlWebpackPlugin({
    filename:`${chunkName}.html`,
    inject: 'body',
    chunks:[chunkName]
  })
});

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: '[name].[contenthash:8].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test:/\.css$/,
        use: [
          'style-loader', 
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }, 
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer',
                    {
                      //选项
                    }
                  ]
                ]
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*']
    }),
    ...htmlPlugins
  ]
}

结果

结果我们就发现打包之后的属性自动加上了内核字符串，做到了兼容css。

补充

postcss-loader 除了可以在 webpack.config.js 中配置外，还可以单独写一个配置文件，如下：

/** ./webpack.config.js **/
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: true
          }
        },'postcss-loader']
      }
    ]
  }
  //...
}

/** ./postcss.config.js **/
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

css 兼容性

背景

webpack 5 实现

package.json 配置

css 文件