一切皆模块
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
可以很好的发挥它们的作用。