課前準(zhǔn)備：
webpack最重要的四個(gè)核心概念：入口(entry)、輸出(output)、加載器(loaders)、插件(plugins)。
上一節(jié)我們搭建了一個(gè)簡(jiǎn)易的webpack工程，實(shí)現(xiàn)了本地啟動(dòng)項(xiàng)目的功能，了解了入口(entry)、輸出(output)的基本使用方法，本節(jié)我們將一起探討加載器loaders的使用方法。
在webpack的世界里，每個(gè)文件都是一個(gè)模塊，比如：.css、.js、.html、.less、.scss、.jpg等，對(duì)于不同的模塊，需要使用不同的加載器(loaders)來處理。通過安裝不同的加載器可以對(duì)各種后綴的文件進(jìn)行處理，比如寫一些css樣式，就要使用到style-loader、css-loader。
通過npm安裝：
npm install css-loader --save-dev
npm install style-loader --save-dev
或者合并來寫
npm install --save-dev css-loader style-loader
安裝完成以后，在webpack.config.js內(nèi)進(jìn)行配置loaders，增加對(duì).css文件處理：
var config = {
? ? //entry output省略
? ? module: {
? ? ? ? rules: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.css$/,? //檢測(cè)以.css為后綴的文件
? ? ? ? ? ? ? ? use: ['style-loader', 'css-loader'] //使用相應(yīng)的loaders對(duì)文件進(jìn)行處理，注意順序
????????????}
????????]
????}
};
module.exports = config;
在module.rules屬性里可以指定一系列的loaders，每一個(gè)loader都必須包含一個(gè)test和use選項(xiàng)。上面的配置文件意思就是說：當(dāng)webpack編譯過程中遇到require()或者import語句導(dǎo)入一個(gè)以.css為后綴的文件時(shí)，先通過css-loader轉(zhuǎn)換，再通過style-loader轉(zhuǎn)換，然后繼續(xù)打包。use選項(xiàng)的值可以是數(shù)組或者字符串，特別要注意的是，如果是數(shù)組，那么它的編譯順序就是從后往前。
在根目錄下新建style.css，代碼如下：
#app {
? ? color: red;
? ? font-size: 20px;
}
在index.js中引入style.css，代碼如下：
import './style.css';
setTimeout(() => {
? ? document.getElementById('app').innerHTML = 'Hello Webpack And Vue!';
}, 5000);
重新執(zhí)行npn run dev命令，啟動(dòng)成功以后發(fā)現(xiàn)頁面已經(jīng)出現(xiàn)了我們想要的效果：div#app內(nèi)的字體顏色為紅色，字體大小為20px。
打開Chrome控制臺(tái)，檢查頁面元素發(fā)現(xiàn)：
css是通過javascript動(dòng)態(tài)創(chuàng)建<style>標(biāo)簽來寫入的，這就意味著樣式代碼已經(jīng)編譯在index.js文件里。但是實(shí)際業(yè)務(wù)中，可能并不希望這么做，因?yàn)殡S著項(xiàng)目的增大和樣式的增多，js的體積會(huì)越來越大，而且不能做緩存。這是就需要用到webpack最后一個(gè)重要的概念——插件(plugins)，下一節(jié)我們會(huì)詳細(xì)講解插件的使用步驟和場(chǎng)景。
總結(jié)：
（1）webpack四個(gè)核心思想：入口(entry)、出口(output)、加載器(loaders)、插件(plugins)。
（2）loaders是在webpack.config.js內(nèi)的module.rules(數(shù)組類型)屬性上配置的。
（3）每一個(gè)loader都要一個(gè)test選項(xiàng)和use選項(xiàng)，其中test通過一個(gè)正則表達(dá)式來判斷不同后綴的文件，use使用一個(gè)字符串或者數(shù)組進(jìn)行該后綴文件的處理方式——處理.css文件使用到了css-loader和style-loader，特別要注意的是如果use使用數(shù)組，那么loader的執(zhí)行方式是從后往前。
（4）js文件引入css文件，可以使用require()或import方法。
完整代碼github地址：https://github.com/zhiyuanMain/zhihu-daily
