webpack最佳入门实践系列(10)

Posted 2020-10-30 edunodeing

10.css模块化

10.1.什么是css模块？

CSS模块就是所有的类名都只有局部作用域的CSS文件，当你在一个javascript模块中导入一个CSS文件时，CSS模块将会定义一个对象，将文件中类的名字动态的映射为JavaScript作用域中可以使用的字符串，CSS模块不是浏览器中的官方标准(official spec) 或者 实践(implementation) 而是一个(在Webpack或者Browserify的帮助下)改变类名和选择器的作用域到当前文件(类似于命名空间)的构建过程

通俗的说，css模块化，就是把css文件当作是模块来用，引入一个css文件的时候，得到一个对象，通过对象.类名的这种形式来使用css样式，这样做的好处就是所有类名都挂在了一个对象上，防止同名的类起冲突

10.2.在webpack中使用css模块化

首先，在src/assets/css/index.css文件中写入一段测试代码

.pbox{
    border: 4px solid black;
    color: red;
}

　　

在src/assets/js/index.js中写入一段测试代码

// 引入icon图标字体
//import "font-awesome/css/font-awesome.css"

// 引入图片

import imgSrc from ‘../img/nodeing.jpg‘

// 把图片插入到html网页中

// document.getElementById("box").innerHTML = ‘<img src="‘+imgSrc+‘" />‘

// 测试css模块

import styles from ‘../css/index.css‘

document.getElementById("box").innerHTML = `<p class="${styles.pbox} ">hello nodeing</p>`

　　

此时，运行npm start是看不到css样式的，我们必须在webpack.config.js中增加配置，开启css模块化才行，配置修改如下：

{
    test: /\.css$/,
    use: [
        ‘style-loader‘,
        {
            loader: ‘css-loader‘,
            options: {
                name: ‘assets/css/[name]_[hash:4].[ext]‘,
                module: true,
                localIdentName: ‘[path]-[name]-[local]-[hash:base64:6]‘
            }
        }   
    ]
},

　　

配置修改后npm start运行就可以查看到css已经生效了，这上面的配置中

module: true, 表示开启模块化

localIdentName: ‘[path]-[name]-[local]-[hash:base64:6]‘ 表示定制类名称，[path]表示当前css文件路径，[name]表示当前css文件名称，[local]表示类名称(如：pbox)，[hash:base64:6]表示base64的hash字符串，并且长度为6位

接下来，我们去src/assets/js/index.js中，把图标字体的css文件注释去掉

//import "font-awesome/css/font-awesome.css" 修改前
import "font-awesome/css/font-awesome.css"

　　

修改了js文件，服务器会重启刷新，但是我们发现虽然我们引入了font-awesome.css这个文件，但是index.html中的图标仍然没有显示出来，以下是引用图标的html代码

<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-envelope-open" aria-hidden="true"></i>
<i class="fa fa-microchip" aria-hidden="true"></i>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>

　　

这些图标没有生效的原因是，我们在webpack中开启了模块化，开启了模块化功能后，使用样式的方式变成了"对象.类名"的形式,而在index.html中我们还在使用原来的形式，这样就不会有效果

我们现在的需求就变成了：有些地方的css文件是需要开启模块化的，有些地方的css是不需要开启模块化的(例如：我们案例中的font-awesome.css文件)，这个时候，我们需要去修改webpack配置，实现模块化文件的定制

{
    test: /\.css$/,
    use: [
        ‘style-loader‘,
        {
            loader: ‘css-loader‘,
            options: {
                name: ‘assets/css/[name]_[hash:4].[ext]‘,
                module: true,
                localIdentName: ‘[path]-[name]-[local]-[hash:base64:6]‘
            }
        }   
    ],
    //这条规则是需要开启模块化的，设置包含的文件夹
    include: [
        path.resolve(__dirname, ‘src/assets‘)
    ]
},

　　

我们在上面这条规则中配置了一条规则，include表示包含的意思，它的后面给一个数组，数组里面可以写一些路径，这些路径下的css文件就是需要开启模块化的css文件，既然是数组，那么就可以给多个路径

修改过了配置文件，我们必须重启服务器才行，所以ctrl+c先关掉服务器，再通过npm start来启动，这个时候我们发现报错了，这时报错是正常的，因为，当我们在 ‘test: /.css$/’这条正则表达式规则下加了include包含的路径，那么意味着只处理了include包含路径下的css文件，而include以外的css文件并没有loader来处理它，所以，报了这样一个错误：

ERROR in ./node_modules/font-awesome/css/font-awesome.css
Module parse failed: Unexpected character ‘@‘ (7:0)
//每次看到这句话，你就应该猜到要用对应的loader来处理对应的文件
You may need an appropriate loader to handle this file type.
| /* FONT PATH
|  * -------------------------- */
| @font-face {
|   font-family: ‘FontAwesome‘;
|   src: url(‘../fonts/fontawesome-webfont.eot?v=4.7.0‘);
 @ ./src/assets/js/index.js 3:0-44
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/assets/js/index.js

　　

既然明白了报错原因，解决方案就非常简单了，我们去修改webpack配置文件

{
    test: /\.css$/,
    use: [
        ‘style-loader‘,
        {
            loader: ‘css-loader‘,
            options: {
                name: ‘assets/css/[name]_[hash:4].[ext]‘,
                module: true,
                localIdentName: ‘[path]-[name]-[local]-[hash:base64:6]‘
            }
        }   
    ],
    //这条规则是需要开启模块化的，设置包含的文件夹
    include: [
        path.resolve(__dirname, ‘src/assets‘)
    ]
},
{
    test: /\.css$/,
    use: [
        ‘style-loader‘,
        {
            loader: ‘css-loader‘,
            options: {
                name: ‘assets/css/[name]_[hash:4].[ext]‘,
            }
        }   
    ],
    //这条规则是不需要开启模块化的，设置包含的文件夹
    include: [
        path.resolve(__dirname, ‘node_modules‘)
    ]
},

　　

从上面的配置，我们可以看出，解决思路很简单，就是我们把原来处理css文件的配置copy了一份，然后在copy的这份上做了修改，把css模块化设置去掉了，然后通过include设置了一个路径：path.resolve(__dirname, ‘node_modules‘)，这个路径是第三方包的安装路径，我们的font-awesome.css文件就在这个路径下，意味着在这个路径下的所有文件都不会被模块化，这样就形成了一种结构，想让哪个路径下的文件不使用模块化功能，就在这个配置中添加路径就可以了，同理，想让哪个路径下的文件使用模块化功能，就在另一个css配置项中添加路径，到此，css模块化的基础内容就已经学完了