Webpack进阶第五节

一切皆模块

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

CSS

webpack提供两个工具样式表，css-loader和style-loader，二者处理的任务不同，css-loader使你能够使用类似@import和url(……)的方法实现require()的功能。style-loader将所有计算后的样式加入页面中，二者组合在一起使你能把样式表嵌入webpack打包后的JS文件中。

继续上边的例子安装：

npm install --save dev css-loader style-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的方法

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

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

CSS module

在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，配合优化工具，依赖管理和加载管理可以自动完成。

不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都非常困难。

被称为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 (
<div className={styles.root}> //使用cssModule添加类名的方法
{config.greetText}
</div>
);
}
}

export default Greeter

CSS预处理器

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

你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders:

Less Loader

Sass Loader

Stylus Loader

不过其实也存在一个css的CSS的处理平台-PostCSS，它可以帮助你的CSS实现更多的功能。

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

安装postcss-loader 和autoprefixer(自动添加前缀的插件)

npm install --save-dev postcss-loader autoprefixer

接下来，在webpack配置文件中添加postcss-loader，在根目录新建postcss.config.js,重新使用npm start打包时，你写的css会自动根据Can i use里面的数据添加不同的前缀。

本文已经谈论了处理JS的Babel和处理CSS的PostCSS的基本用法，它们其实也是两个单独的平台，配合webpack可以很好的发挥它们的作用。

猜你喜欢