我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

css模块化,生成的css代码都是随机的。具体体现在类名和id名上,对应的名字和传统的css选择器的命名是不一样的。其命名可以带上命名控件及随机数。当然,这个命名空间也实际上是假的,就是会安装特殊的命名规则生成选择器名称而已。

苏南大叔:webpack教程,webpack如何处理css module模块化? - css模块化
webpack教程,webpack如何处理css module模块化?(图5-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔高兴写的东西。本文描述如何利用webpack配置css模块化。当然,在实际应用中,本文中的这些还是不够的。所以,这里就是个入门阐述概念的目的。测试环境:win10node@16.14.2webpack@5.73.0webpack-cli@4.10.0webpack-dev-server@4.9.3mini-css-extract-plugin@2.6.1css-loader@6.7.1html-webpack-plugin@5.5.0,style-loader@3.3.1

css模块化的概念

其实用文字叙述来描述css模块化的概念,挺难的。这里写个代码对比:
传统的css调用代码如下:

<div class="btn color-red">按钮</div>

新的模块化的代码:

<div class="sunan-blog-btn-uOi0azdw">按钮</div>

sunan.blog.css

.btn{
  color:red;
}

大家可以看出,使用css模块化的概念后,编写htmlcss就变得很难了。本来很容易理解的代码关系就变得异常复杂起来。当然,这就是现在的发展趋势,没辙,所有的jscsshtml都纷纷作妖,继而引出这些问题的解决者:webpack

苏南大叔:webpack教程,webpack如何处理css module模块化? - css模块化结果
webpack教程,webpack如何处理css module模块化?(图5-2)

配置webpack

本文就是以展示css模块化为目标,但是牵扯了一堆杂事。

npm init
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader mini-css-extract-plugin style-loader -D

大家如果想要搞清这些webpack插件都是干啥的,请参考如下文章:

这里先贴一下webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    // mode: 'production', // 环境
    mode: 'development', // 环境
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    // watch: true, 
    devServer: {
        // contentBase: './dist',
        static:'./static',
        compress: true, 
        port: 3000,
        open: true,
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash:8].css',
        }),
        new HtmlWebpackPlugin({
            template:"./html/index.html", // 根据 目标文件生成 html
            title: 'title参数',
            showErrors: true,
            inject: 'body',
        }),
    ],
    module: {
        rules: [
            {
              test: /\.css$/,
              use: [
                // 'style-loader',
                MiniCssExtractPlugin.loader,
                {
                  loader: 'css-loader',
                  options: {
                    // modules: true,
                    modules: {
                        localIdentName: '[path][name]__[local]--[hash:base64:5]'   
                    }
                  }
                }
              ],
            },
        ]
    }
}

package.json

{
  "name": "vvebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

其余文件代码

html/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="btn">原版btn</div>
    <div id="root"></div>
</body>
</html>

苏南大叔:webpack教程,webpack如何处理css module模块化? - js引入css
webpack教程,webpack如何处理css module模块化?(图5-3)

src/aaa.bbb.css

:global(.btn){
    color:red;
}
#btn{
    color:blue;
}
.btn{
    color:pink;
}
.btn-2{
    color:brown;
}
.btn-3{
    composes:btn-2;
    font-weight:bold;
}

src/index.js

import styles from "./aaa.bbb.css";
console.log(styles);
var element = document.getElementById("root");
var next_html = '<div class="' + styles.btn + '">class btn</div>';
next_html += '<div id="' + styles.btn + '">id btn</div>';
next_html += '<div class="' + styles["btn-2"] + '">class命名带中划线</div>';
next_html += '<div class="' + styles["btn-3"] + '">杂合class name</div>';
element.innerHTML = next_html;

代码解说

代码解说起来还是挺麻烦的,所以就捡着重点说吧。要是谁不明白,请查看苏南大叔以前的webpack文章:

苏南大叔:webpack教程,webpack如何处理css module模块化? - 运行结果截图
webpack教程,webpack如何处理css module模块化?(图5-4)

css模块化后,所有的css条目名字都会被修改。

  • 其中的名字的规则来自localIdentName。如果不设置的话,就会显示为随机数。
  • 开启模块化,来自于:css-loader里面的options.module
  • css的条目,如果不想被修改名字的话。需要使用:global()来修饰一下。
  • .js中被import引入后,需要和对应的模版的html相结合。本文中的方式是比较弱智的,正常来说,需要使用各种模版引擎来处理。
  • 对于.btn#btn来说,虽然同名,在import里面是一个变量。但是,对于css文件来说,还是两个不同的条目。
  • 对于名字有中划线的命名,需要使用[]来引用,否则会报错。
  • composes这个语法,可以处理两个class的情况。

苏南大叔:webpack教程,webpack如何处理css module模块化? - css-loader
webpack教程,webpack如何处理css module模块化?(图5-5)

css被处理后的表现形式:

  • 处于js代码中的话,就是style-loadercss-loader的组合。
  • 处于单独的css文件中的话,就是MiniCssExtractPlugin.loadercss-loader的组合。

相关文章

综述

这里的css模块化,算是比较高级的内容了。它的存在对于反爬虫技术来说,是个好消息。对于喜欢采集别人文章的人来说,这些随时变化的css就是个巨大的炸弹。更多webpack的文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css    webpack