(五)模块化处理

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

CSS

webpack为我们提供css-loaderstyle-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预处理器

SassLess之类的预处理器是对原生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-loaderautoprefixer(自动添加前缀的插件)

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