(五)模块化处理

webpack可以将不同的文件都按照模块的方式进行处理，比如js，css等都可以通过不同的loader进行打包处理。

CSS

webpack为我们提供​​css-loader​​​和 ​​style-loader​​​两个工具来处理样式表，他们二者处理的任务是不同的。
​​​css-loader​​​使你能够使用类似@import 和 url(...)的方法实现 require()的功能。
​​​style-loader​​​将所有的计算后的样式加入页面中。
这二者组合在一起可以使你能够把样式表嵌入webpack打包后的JS文件中。
我们接着上面的例子来配置这两个工具：
安装

npm install --save-dev css-loader
npm install --save-dev style-loader

本文以webpack文章的demo为例，如果未阅读上文，并且想了解完整过程请点击​​回到上文​​​配置
在​​webpack.config.js​​中配置这两个工具

module.exports = {
    ...
    module: {
        rules: [
           ...
           { // 这里配置这两个工具
                test: /\.css$/,
                exclude: /node_modules/,
                use: [ // 请注意这里对同一个文件引入多个loader的方法。
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

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

image.png

在​​main.css​​文件内填入样式

body{
    background-color: red;
    border: 5px solid yellow;
}
ul, li{
    list-sytle:none;
}

然后我们要怎么用这个样式呢？，我们知道我们的例子中有一个webpack的入口，没错那就是​​main.js​​​，为了让webpack能找​​main.css​​​文件，我们要将这个样式导入到​​main.js​​​中，其它的模块需要通过 import, require, url等与入口文件建立其关联。
​​​main.js​​文件修改如下：

import React from 'react';
import {render} from 'react-dom';
import App from './App';

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

render(<App />, document.getElementById('root'));

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

CSS module

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，那么如果我们设置的相同class名称较多的时候，那么可想而知页面会从在声明现象，用一个比较官方的词就是它会造成全局污染。
​​​CSS module​​​功能就是将JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块，这样做有效避免了全局污染。
接下来我们在来改动下​​​webpack.config.js​​配置文件

module.exports = {

    ...

    module: {
        rules: [
            ...
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                           // 指定css的嘻哈类名格式
                            localIdentName: '[name]__[local]--[hash:base64:5]'
                        }
                    }
                ]
            }
        ]
    }
}

我们在app文件夹下创建一个​​App.css​​文件，并填入以下代码来进行一下测试

image.png

.root {
    height: 30px;
    background-color: green;
    margin-top: 20px;
    border: 2px solid blue;
}

将​​App.css​​​导入​​App.js​​

import React, {Component} from 'react'
import config from './config.json';

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

class App extends Component{
    render(){
        return (
            <div className={styles.root}>
                {config[0].text}
            </div>
        )
    }
}
export default App

我们看下页面运行结果

image.png

image.png

CSS预处理器

​​Sass​​​和 ​​Less​​​之类的预处理器是对原生CSS的拓展，它们允许你使用类似于​​variables​​​,​​nesting​​​,​​mixins​​​,​​inheritance​​​等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句。
以下是常用的CSS 处理​​​loaders​​

• ​​Less Loader​​
• ​​Sass Loader​​
• ​​Stylus Loader​​

不过其实也存在一个CSS的处理平台​​-PostCSS​​​，它可以帮助你的CSS实现更多的功能，在其​​官方文档​​可了解更多相关知识。

举例来说如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀

第一步 安装​​postcss-loader​​​ 和 ​​autoprefixer​​（自动添加前缀的插件）

npm install --save-dev postcss-loader
npm install --save-dev autoprefixer

第二步 在根目录新建​​postcss.config.js​​并添加如下代码

image.png

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

第三步 在​​webpack.config.js​​​中配置​​babel-loader​​

module.exports = {

    ...

    module: {
        rules: [
            ...
            {
                test: /\.css$/,
                use: [
                    ...
                    {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}

最后 重新使用​​npm start​​打包，你写的css会自动根据Can i use里的数据添加不同前缀了