webpack从入门到原理（基础六）——样式兼容

i东东
331 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

前言

这一篇文章写了如何将css文件提取成为单独文件，并进行了css样式兼容、css压缩，以及重复代码的封装。

css文件提取

css 文件当前被打包到了 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式，这样对于网页来说，会出现闪屏现象，用户体验不好，所以我们应该是单独的 Css 文件，通过 link 标签加载这样性能以及用户体验才会更好一些。

插件安装

参考官方文档进行插件的安装及配置

npm i mini-css-extract-plugin -D

建议 mini-css-extract-plugin 与 css-loader 一起使用。之后将 loader 与 plugin 添加到的 webpack 配置文件中。

// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
......
rules: [
  {
    // 用来匹配 .css 结尾的文件
    test: /.css$/,
    // use 数组里面 Loader 执行顺序是从右到左
    use: [MiniCssExtractPlugin.loader, "css-loader"],
  }
]
plugis:[
    // 提取css成单独文件
    new MiniCssExtractPlugin({
        // 定义输出文件名和目录
        filename: "static/css/main.css",
    }),
]

注意：将配置文件中所有的"style-loader"替换成MiniCssExtractPlugin.loader(注意不是字符串),因为"style-loader"会动态的创建style标签,用了新的loader才会将css文件提取成为单独的文件。

完成配置之后npm run build就可以看到打包之后css成为了单独的文件。

image.png

样式兼容性处理

由于需要适应不同版本的浏览器，所以需要对样式进行兼容性处理，从而使代码在不同的版本的浏览器下都能更好地显示。

安装插件

首先参考官方文档安装处理兼容性的loader：

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

配置如下：

// webpack.prod.js
...
{
    loader: "postcss-loader",
    options: {
    postcssOptions: {
    plugins: [
      "postcss-preset-env", // 能解决大多数样式兼容性问题
            ],
        },
    },
},
...

注意：增加的配置位置要css-loader的下面，例如下图：

image.png

控制兼容性

我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。可参考browserslist文档 。

{
  // package.json
  ....
  "browserslist": [
  "last 2 version", // 只对浏览器最近的两个版本进行兼容
  "> 1%", // 对市面上99%的浏览器进行兼容
  "not dead" // 不对已经死掉的版本进行兼容
  ]
}

如果不需要对旧版本浏览器进行兼容，可以用上面的配置，配置取交集 。

使用

browserslist设置为"browserslist": ["ie >= 8"],对IE8及以上的版本进行兼容，这样就可以写一些存在兼容性问题的属性进行测试。

image.png 左边是增加的有兼容性问题的属性display:flex,右边是打包处理后的css样式，可以发现打包后display: -ms-flexbox;属性上加了处理兼容性的前缀。

重复代码的封装

从上面发现配置中会出现很多的重复代码，所以可以将它们封装起来多次调用。

// webpack.prod.js
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor
  ].filter(Boolean)
}

image.png

css压缩

插件安装参考官网文档

npm install css-minimizer-webpack-plugin --save-dev

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
......
plugins: [
     new CssMinimizerPlugin()
]

配置完成重新打包就可以看到css文件被压缩成了一行文件。

注:当运行生产环境html(前提是使用了HtmlWebpackPlugin)和js文件会默认压缩，所以不需要额外进行处理！

小结

以更文促进学，持续不断进步,加油！

avatar
文章
阅读
粉丝