【工程】webpack 系列 — CSS工程化

theDukes
978 阅读7分钟

打算系统的整理一下，webpack 的一些知识点，也是时候结合项目中使用的一些 案例，做一些总结了。

webpack系列 打算从 webpack核心功能 -> 常用扩展 -> CSS 工程化 -> JS 兼容性 -> 性能优化 这几个方面开始记录。

以及结合一些案例，方便大家阅读和实践，以备 开箱即用。

仓库地址：PantherVkin/webpack-note (github.com)

css工程化概述

css的问题

  1. 类名冲突的问题？

当你写一个css类的时候，你是写全局的类呢，还是写多个层级选择后的类呢？

你会发现，怎么都不好：

  • 过深的层级不利于编写、阅读、压缩、复用
  • 过浅的层级容易导致类名冲突

一旦样式多起来，这个问题就会变得越发严重，其实归根结底，就是类名冲突不好解决的问题。

  1. 重复样式？

这种问题就更普遍了，一些重复的样式值总是不断的出现在css代码中，维护起来极其困难。

比如，一个网站的颜色一般就那么几种：

  • primary
  • info
  • warn
  • error
  • success

如果有更多的颜色，都是从这些色调中自然变化得来，可以想象，这些颜色会到处充斥到诸如背景、文字、边框中，一旦要做颜色调整，是一个非常大的工程。

  1. css文件细分问题

在大型项目中，css也需要更细的拆分，这样有利于css代码的维护。

比如，有一个做轮播图的模块，它不仅需要依赖js功能，还需要依赖css样式，既然依赖的js功能仅关心轮播图，那css样式也应该仅关心轮播图，由此类推，不同的功能依赖不同的css样式、公共样式可以单独抽离，这样就形成了不同于过去的css文件结构：文件更多、拆分的更细

而同时，在真实的运行环境下，我们却希望文件越少越好，这种情况和JS遇到的情况是一致的。

因此，对于css，也需要工程化管理。

从另一个角度来说，css的工程化会遇到更多的挑战，因为css不像JS，它的语法本身经过这么多年并没有发生多少的变化（css3也仅仅是多了一些属性而已），对于css语法本身的改变也是一个工程化的课题。

如何解决

这么多年来，官方一直没有提出方案来解决上述问题。

一些第三方机构针对不同的问题，提出了自己的解决方案。

解决类名冲突

  1. 命名约定

即提供一种命名的标准，来解决冲突，常见的标准有：

  • BEM
  • OOCSS
  • AMCSS
  • SMACSS
  • 其他
  1. css in js

这种方案非常大胆，它觉得，css语言本身几乎无可救药了，干脆直接用js对象来表示样式，然后把样式直接应用到元素的style中。

这样一来，css变成了一个一个的对象，就可以完全利用到js语言的优势，你可以：

  • 通过一个函数返回一个样式对象
  • 把公共的样式提取到公共模块中返回
  • 应用js的各种特性操作对象，比如：混合、提取、拆分
  • 更多的花样

这种方案在手机端的React Native中大行其道。

  1. css module

非常有趣和好用的css模块化方案，编写简单，绝对不重名。

解决重复样式的问题

  1. css in js

这种方案虽然可以利用js语言解决重复样式值的问题，但由于太过激进，很多习惯写css的开发者编写起来并不是很适应

  1. 预编译器

有些第三方搞出一套css语言的进化版来解决这个问题，它支持变量、函数等高级语法，然后经过编译器将其编译成为正常的css。

这种方案特别像构建工具，不过它仅针对css。

常见的预编译器支持的语言有：

  • less
  • sass

解决css文件细分问题

这一部分，就要依靠构建工具，例如webpack来解决了。

利用一些loader或plugin来打包、合并、压缩css文件。

利用webpack拆分css

要拆分css，就必须把css当成像js那样的模块？

要把css当成模块，就必须有一个构建工具（webpack），它具备合并代码的能力。

而webpack本身只能读取css文件的内容、将其当作JS代码进行分析，因此，会导致错误

于是，就必须有一个loader，能够将css代码转换为js代码

css-loader

css-loader的作用，就是将css代码转换为js代码。

它的处理原理极其简单：将css代码作为字符串导出。

案例1：简单使用

  1. css
.red{
    color:"#f40";
}
  1. 经过css-loader转换后变成js代码
module.exports = `.red{
    color:"#f40";
}`

上面的js代码是经过我简化后的，不代表真实的css-loader的转换后代码，css-loader转换后的代码会有些复杂，同时会导出更多的信息，但核心思想不变。

  1. 完整案例

webpack-note/examples/3.1利用webpack 拆分css/1.1-css-loader 简单使用 at master · PantherVkin/webpack-note (github.com)

  1. npx webpack-dev-server

image.png

案例2：依赖其他文件

  1. css
.red{
    color:"#f40";
    background:url("./bg.png")
}

2 经过css-loader转换后变成js代码

var import1 = require("./bg.png");
module.exports = `.red{
    color:"#f40";
    background:url("${import1}")
}`;

这样一来，经过webpack的后续处理，会把依赖./bg.png添加到模块列表，然后再将代码转换为

var import1 = __webpack_require__("./src/bg.png");
module.exports = `.red{
    color:"#f40";
    background:url("${import1}")
}`;
  1. 完整案例

webpack-note/examples/3.1利用webpack 拆分css/1.2-css-loader依赖其他文件 at master · PantherVkin/webpack-note (github.com)

  1. npx webpack-dev-server

image.png

案例3：导入CSS文件

  1. css
@import "./reset.css";
.red{
    color:"#f40";
    background:url("./bg.png")
}
  1. 会转换为
var import1 = require("./reset.css");
var import2 = require("./bg.png");
module.exports = `${import1}
.red{
    color:"#f40";
    background:url("${import2}")
}`;
  1. 完整案例

webpack-note/examples/3.1利用webpack 拆分css/1.3-css-loader 导入css文件 at master · PantherVkin/webpack-note (github.com)

  1. npx webpack-dev-server

image.png

总结

总结，css-loader干了什么？

  1. 将css文件的内容作为字符串导出

  2. 将css中的其他依赖作为require导入，以便webpack分析依赖

style-loader

由于css-loader仅提供了将css转换为字符串导出的能力，剩余的事情要交给其他loader或plugin来处理。

style-loader可以将css-loader转换后的代码进一步处理，将css-loader导出的字符串加入到页面的style元素中。

原理

  1. css
.red{
    color:"#f40";
}
  1. 经过css-loader转换后变成js代码
module.exports = `.red{
    background:"#f40";
}`
  1. 经过style-loader转换后变成
module.exports = `.red{
    background:"#f40";
}`
var style = module.exports;
var styleElem = document.createElement("style");
styleElem.innerHTML = style;
document.head.appendChild(styleElem);
module.exports = {}

以上代码均为简化后的代码，并不代表真实的代码。

style-loader有能力避免同一个样式的重复导入。

配置

从右向左把loader的结果交给下一个loader，所以先使用css-loader。

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

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  module: {
    rules: [{test: /\.css$/, use: ['style-loader', 'css-loader']}]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}
  1. 完整案例

webpack-note/examples/3.1利用webpack 拆分css/2.1-style-loader at master · PantherVkin/webpack-note (github.com)

BEM

BEM:

BEM是一套针对css类样式的命名方法。

其他命名方法还有：OOCSS、AMCSS、SMACSS等等。

BEM全称是：Block Element Modifier。

一个完整的BEM类名：

block__element_modifier，例如：banner__dot_selected，可以表示：轮播图中，处于选中状态的小圆点。

三个部分的具体含义为：

  1. Block

页面中的大区域，表示最顶级的划分，例如：轮播图(banner)、布局(layout)、文章(article)等等

  1. element

区域中的组成部分，例如：轮播图中的横幅图片(banner__img)、轮播图中的容器（banner__container）、布局中的头部(layout__header)、文章中的标题(article_title)

  1. modifier

可选。通常表示状态，例如：处于展开状态的布局左边栏（layout__left_expand）、处于选中状态的轮播图小圆点(banner__dot_selected)

可能前缀：

在某些大型工程中，如果使用BEM命名法，还可能会增加一个前缀，来表示类名的用途，常见的前缀有：

  • l

layout，表示这个样式是用于布局的。

  • c

component，表示这个样式是一个组件，即一个功能区域。

  • u

util，表示这个样式是一个通用的、工具性质的样式。

  • j

javascript，表示这个样式没有实际意义，是专门提供给js获取元素使用的。

css in js

原理

css in js 的核心思想是：用一个JS对象来描述样式，而不是css样式表。

const styles = {a
    backgroundColor: "#f40",
    color: "#fff",
    width: "400px",
    height: "500px",
    margin: "0 auto"
}

由于这种描述样式的方式根本就不存在类名，自然不会有类名冲突。

至于如何把样式应用到界面上，不是它所关心的事情，你可以用任何技术、任何框架、任何方式将它应用到界面。

css in js的特点

  1. 绝无冲突的可能

由于它根本不存在类名，所以绝不可能出现类名冲突。

  1. 更加灵活

可以充分利用JS语言灵活的特点，用各种招式来处理样式。

  1. 应用面更广

只要支持js语言，就可以支持css in js，因此，在一些用JS语言开发移动端应用的时候非常好用，因为移动端应用很有可能并不支持css。

  1. 书写不便

书写样式，特别是公共样式的时候，处理起来不是很方便。

  1. 在页面中增加了大量冗余内容

在页面中处理css in js时，往往是将样式加入到元素的style属性中，会大量增加元素的内联样式，并且可能会有大量重复，不易阅读最终的页面代码。

案例

webpack-note/examples/3.2-css in js at master · PantherVkin/webpack-note (github.com)

css module

通过命名规范来限制类名太过死板，而css in js虽然足够灵活，但是书写不便。

css module 开辟一种全新的思路来解决类名冲突的问题。

思路

css module 遵循以下思路解决类名冲突问题：

  1. css的类名冲突往往发生在大型项目中

  2. 大型项目往往会使用构建工具（webpack等）搭建工程

  3. 构建工具允许将css样式切分为更加精细的模块

  4. 同JS的变量一样，每个css模块文件中难以出现冲突的类名，冲突的类名往往发生在不同的css模块文件中

  5. 只需要保证构建工具在合并样式代码后不会出现类名冲突即可

image.png

实现原理

在webpack中，作为处理css的css-loader，它实现了css module的思想，要启用css module，需要将css-loader的配置modules设置为true。

css-loader的实现方式如下： 原理极其简单，开启了css module后，css-loader会将样式中的类名进行转换，转换为一个唯一的hash值。

由于hash值是根据模块路径和类名生成的，因此，不同的css模块，哪怕具有相同的类名，转换后的hash值也不一样。

image.png

如何应用样式

css module带来了一个新的问题？

源代码的类名和最终生成的类名是不一样的，而开发者只知道自己写的源代码中的类名，并不知道最终的类名是什么，那如何应用类名到元素上呢？

为了解决这个问题，css-loader会导出原类名和最终类名的对应关系，该关系是通过一个对象描述的。

image.png

这样一来，我们就可以在js代码中获取到css模块导出的结果，从而应用类名了。

style-loader 为了我们更加方便的应用类名，会去除掉其他信息，仅暴露对应关系。

其他操作

全局类名

某些类名是全局的、静态的，不需要进行转换，仅需要在类名位置使用一个特殊的语法即可：

:global(.main){
    ...
}

使用了global的类名不会进行转换，相反的，没有使用global的类名，表示默认使用了local。

:local(.main){
    ...
}

使用了local的类名表示局部类名，是可能会造成冲突的类名，会被css module进行转换。

如何控制最终的类名

绝大部分情况下，我们都不需要控制最终的类名，因为控制它没有任何意义。

如果一定要控制最终的类名，需要配置css-loader的localIdentName。

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [
            {
                // test: /\.css$/, use: ["style-loader", {
                //     loader: "css-loader",
                //     options: {
                //         // modules: {
                //         //     localIdentName: "[local]-[hash:5]"
                //         // }
                //         modules:true
                //     }
                // }]
                test: /\.css$/, use:["style-loader", "css-loader?modules"]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ],
    devServer: {
        open: true
    }
}

其他注意事项

  1. css module往往配合构建工具使用

  2. css module仅处理顶级类名，尽量不要书写嵌套的类名，也没有这个必要

  3. css module仅处理类名，不处理其他选择器

  4. css module还会处理id选择器，不过任何时候都没有使用id选择器的理由

  5. 使用了css module后，只要能做到让类名望文知意即可，不需要遵守其他任何的命名规范

webpack中使用less

  1. 安装
$ npm i -D less-loader less
  1. src/index.js
import styles from "./index.less"
var div = document.getElementById("app");
div.className = styles.main;
  1. webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  module: {
    rules: [
      {test: /\.css$/, use: ['style-loader', 'css-loader']},
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}
  1. 完整案例 webpack-note/examples/3.3-webpack中使用less at master · PantherVkin/webpack-note (github.com)

webpack中使用postcss

什么是postcss

【CSS】什么是PostCss - 掘金 (juejin.cn)

webpack 使用postcss

  1. 安装
$ npm i -D postcss-loader postcss-preset-env
  1. postcss.config.js
module.exports = {
    map: false, //关闭source-map
    plugins: {
        "postcss-preset-env": {
            stage: 0, //哪怕是处于草案阶段的语法，也需要转换
            preserve: false
        }
    }
}
  1. webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.pcss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}
  1. 完整案例 webpack-note/examples/3.4-webpack中使用postcss at master · PantherVkin/webpack-note (github.com)

抽离css 文件

目前，css代码被css-loader转换后，交给的是style-loader进行处理。

style-loader使用的方式是用一段js代码，将样式加入到style元素中。

而实际的开发中，我们往往希望依赖的样式最终形成一个css文件。

  1. 需要用到一个库：mini-css-extract-plugin

该库提供了1个plugin和1个loader

  • plugin：负责生成css文件

  • loader：负责记录要生成的css文件的内容，同时导出开启css-module后的样式对象

  • 使用方式

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin() //负责生成css文件
  ]
}
  1. 配置生成的文件名

同output.filename的含义一样，即根据chunk生成的样式文件名。

配置生成的文件名，例如[name].[contenthash:5].css。

默认情况下，每个chunk对应一个css文件。

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      },
      {
        test: /\.png$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/[hash:5].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:5].css'
    })
  ]
}
  1. 完整案例

webpack-note/examples/3.5-webpack抽离css文件 at master · PantherVkin/webpack-note (github.com)

image.png

avatar
文章
阅读
粉丝