07CSS模块

回顾

06学了babel模块，并把babel模块配置拆成了.babelrc文件，webpack会自动去引用。然后把Greeter和main.js改成了react写法，babel模块引入得写法如下:

    //无.babelrc文件时

    module: {
      rules: [
        {
          test:/(\.jsx|\.js)$/,
          use:{
            loader:"babel-loader",
            options:{
              presets:["env","react"]
            }
          },
          exclude:/node_modules/
        }
      ]
    }

    //有.babelrc文件时
    module: {
      rules:[
        {
          test:\(\.js|\.jsx)$\,
          use:{
            loader:"babel-loader"
          },
          exclude:/node_modules/
        }
      ]
    }


  

步骤

• 1.复制上一个文件夹得package.json
• 2.复制上一个文件夹得webpack.config.js
• 3.复制上一个文件夹得内容（最好再手打一遍）
• 4.把webpack学习下得webpack.config.js里得入口和出口地址和websercer入口地址

一切皆模块

Webpack有一个不可不说的优点，它把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可以被处理。

CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同.

• css-loader:使你能够使用类似@import 和 url(...)的方法实现 require()的功能
• style-loader:将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

      //安装
      npm install --save-dev style-loader css-loader

      ...
      module: {
          rules: [
              {
                  test: /(\.jsx|\.js)$/,
                  use: {
                      loader: "babel-loader"
                  },
                  exclude: /node_modules/
              },
              {
                  test: /\.css$/,
                  use: [
                      {
                          loader: "style-loader"
                      }, {
                          loader: "css-loader"
                      }
                  ]
              }
          ]
      }
  }; 

接下来，在app文件夹里创建一个名字为"main.css"的文件，对一些元素设置样式

我们这里例子中用到的webpack只有单一的入口，其它的模块需要通过 import, require, url等与入口文件建立其关联，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中，如下

    //main.js
    import React from 'react';
    import {render} from 'react-dom';
    import Greeter from './Greeter';

    import './main.css';//使用require导入css文件

    render(, document.getElementById('root'));




  

通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。

上面的代码说明webpack是怎么把css当做模块看待的，咱们继续看一个更加真实的css模块实践。

正课:CSS module

被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染。具体的代码如下

      module.exports = {

        ...
    
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: "style-loader"
                        }, {
                            loader: "css-loader",
                            options: {
                                modules: true, // 指定启用css modules
                                localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                            }
                        }
                    ]
                }
            ]
        }
    };
  

这里localIdentName会报错，可能是css-loader版本问题，安装 "css-loader": "^0.28.7",

我们在app文件夹下创建一个Greeter.css文件来进行一下测试

    /* Greeter.css */
      .root {
        background-color: #eee;
        padding: 10px;
        border: 3px solid #ccc;
      }

      导入.root到Greeter.js中

      import styles from './Greeter.css';//导入

  

CSS modules 也是一个很大的主题，有兴趣的话可以去其https://github.com/css-modules/css-modules了解更多。