(五)模块化处理

 

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里的数据添加不同前缀了