webpack教程，webpack如何处理css module模块化?

我们相信：世界是美好的，你是我也是。来玩一下解压小游戏吧！

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

苏南大叔：webpack教程，webpack如何处理css module模块化? - css模块化 — webpack教程，webpack如何处理css module模块化?（图5-1）

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔高兴写的东西。本文描述如何利用webpack配置css模块化。当然，在实际应用中，本文中的这些还是不够的。所以，这里就是个入门阐述概念的目的。测试环境：win10，node@16.14.2，webpack@5.73.0，webpack-cli@4.10.0，webpack-dev-server@4.9.3，mini-css-extract-plugin@2.6.1，css-loader@6.7.1，html-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模块化的概念后，编写html和css就变得很难了。本来很容易理解的代码关系就变得异常复杂起来。当然，这就是现在的发展趋势，没辙，所有的js和css和html都纷纷作妖，继而引出这些问题的解决者：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文章：

https://newsn.net/tag/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-loader和css-loader的组合。
处于单独的css文件中的话，就是MiniCssExtractPlugin.loader和css-loader的组合。

综述

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

https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

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

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

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

	原创不易，转载请保留链接，谢绝镜像采集
	如果能解决您的困扰，那么想必定是极好的
	快来这里！大家都在这儿等你讨论这个问题

css模块化的概念

配置webpack

其余文件代码

代码解说

相关文章

综述

`css`模块化的概念

配置`webpack`