## 前言 也許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 = {},會導出一個配置對象。導出的對象就是生成打包文件的配置對象，根據項目的大小和特點我們可以為對象配置不同的屬性。