webpack打包（六）--css模块化

接上一篇webpack打包（五）--使用loader处理图片

在app.js中把引入的图片去掉

import React from "react";
import ReactDOM from "react-dom";

import "./common/style/main.css"   

ReactDOM.render(
    <div>React</div>,
    document.getElementById("root")
);

css的模块化

仍然是使用css-loader，对css-loader进行配置，不再使用默认配置，在webpack.config中修改

{
    test: /\.(css)$/,
    use: [
           "style-loader", 
           {
             loader:"css-loader",
             options:{
                  module:true
              }
           }
          ]
 }

把css-loader中的module设置为true,开启模块化，默认是false

给main.css加样式

.bg_red {
    background: red;
}
.font_18 {
    font-size: 18px;
}
.abc {
    font-size: 40px;
 }

模块化后样式的引用和使用方式要改变

修改后的app.js

import React from "react";
import ReactDOM from "react-dom";

import style from "./common/style/main.css"

ReactDOM.render(
    <div className={style.bg_red}>React</div>,
    document.getElementById("root")
);

main.css引用后赋值给一个变量，class的使用变成style.bg_red

模块化的优点

在style文件夹下面新建other.css文件

.abc {
    font-size: 30px;
 }

同样的，other.css和main.css一样有一个.abc

引入import other from "./common/style/other.css"

要是要使用main.css里面的abc→main.abc,使用other.css里面的abc→other.abc

模块化后的样式，相当于有了一个命名空间，解决了不同样式文件class冲突问题

一个问题

模块化后class名字非常不友好，运行项目后发现class的名字已经被loader进行了编译

审查元素并不知道自己所使用的class原来是什么

class语义化

css-loader提供了一个参数localIdentName来控制编译后class的命名，有三个参数path，name，local

path:返回当前样式所在的目录
name:返回当前样式文件的名字
local:返回当前引用的class名字

根据自己的需求进行语义化，修改webapck.config的css-loader配置

 use: [
       "style-loader",
       {
          loader: "css-loader",
          options: {
                    module: true,
                    localIdentName: "[local]-[hash:base64:6]"
                }
        }
       ]

参数要用一对[]包住

这里的[hash:base64:6]代表生成一串以base64编码的hash值，长度为6

最后的结果