7.4css模块

## 前言 也许css行内样式不符合你的需求，但是仍然希望css样式与组件紧密相连，那么这里有个 ***css模块*** 的方案供你选择。 ## Webpack前置了解 相信webpack大家并不陌生，它可以吧应用分拆为很多模块，方便按需加载。 而webpack在react领域特别流行，就是因为它有很多好用的特性，其特性之一就是加载器的概念。加载器的赋能使得webpack可以加载除了js以外的任何依赖，只要有对应的加载器。举例来说，在打包文件中可以加载json、图片以及其他资源。 早在2015年，css模块创建者之一Mark Dalgleish发现webpack可以打包导入css，他就推动了这一概念的发展，于是也发布一篇‘the end of global css’文章 ## 搭建使用 ### 初期准备 ``` //初始化包,得到package.json文件 npm init //安装模块 npm i webpack webpack-dev-server --save-dev //安装babel模块 npm i --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react //安装样式需要的 npm i -save-dev style-loader css-loader //html-webpack-plugin 方便实时的托管js应用 npm i --save-dev html-webpack-plugin //支持react npm i --save-dev react react-dom ``` ### 启动项目 了解下npm工作流，这里我们用到的是配置启动项为webpack-dev-server,在package.json文件中，配置下：scripts部分,然后就可以通过npm start来进行启动服务了。 ``` “scripts”:{ "start":"webpack-dev-server" } ``` webpack基本配置项：webpack是通过配置文件获知项目如何运行的，在配置文件中的导出是module.exports = {},会导出一个配置对象。导出的对象就是生成打包文件的配置对象，根据项目的大小和特点我们可以为对象配置不同的属性。