04. 一切皆模块

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

一、CSS

继续上面的例子

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

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

请注意这里对同一个文件引入多个loader的方法。

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

/* main.css */html {  box-sizing: border-box;  -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;}*, *:before, *:after {  box-sizing: inherit;}body {  margin: 0;  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}h1, h2, h3, h4, h5, h6, p, ul {  margin: 0;  padding: 0;}

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

//main.jsimport 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打包为单独的文件的

二、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的类名格式                        }                    }                ]            }        ]    }};

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

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

导入#root到Greeter.js中

import React, {Component} from 'react';import config from './config.json';import styles from './Greeter.css';//导入class Greeter extends Component{  render() {    return (      
    
      //使用cssModule添加类名的方法        {config.greetText}      
    
    );  }}export default Greeter