webpack加載css文件及其配置
- 當我們寫了幾個css文件之后如果想要引用到html中去的話我們最開始的方式就是通過link標簽將css文件導入進去，但是如果我們的css文件有很多的話，一個個的導入是不推薦的；而現在我們學了webpack，我們希望的是通過打包bundle.js文件，將所有的依賴文件全部導入進去。
- 我們要知道的是，如果在入口函數main.js文件中如果沒有導入css文件，那么打包的bundle.js文件必然不會有css文件，所有我們需要讓main.js文件依賴css文件。
- 使用代碼：
require('css文件地址')
- 依賴完之后，我們再打包一下 npm run build 會發現報錯了。錯誤為：You may need an appropriate loader to handle this file type。意思是說你可能需要一個合適的loader來處理這個文件
- 於是我們打開webpack的中文網址，在里面找到了我們需要安裝 css-loader 和 style-loader 這兩個loader。並且我們還需要在webpack.config.js文件中配置一下這些loader
- 於是我們使用npm下載這兩個依賴，代碼如下：
npm install css-loader style-loader --save-dev
- 在webpack.config.js文件中，有一個module的屬性，該屬性為一個對象，在該對象中有個rules屬性，是一個數組，數組中的每一項都是處理不同文件loader所需要的對象。代碼如下：
const path = require('path');
module.exports = {
// 在配置文件中，手動指定 入口 文件和 出口 文件
mode:'development', // webpack4.x版本中需要加入這個屬性
entry:'./src/main.js', // 入口文件
output:{ // 出口文件
path:path.resolve(__dirname,'dist'), // 指定將要打包好的文件應該要輸出到哪個地方去（注意：路徑必須是絕對地址）
filename: 'bundle.js' // 指定輸出文件的文件名
},
module:{
rules:[
{test:/\.css$/ , use:['style-loader' , 'css-loader']}
]
}
}
- 其中test表示我們要處理的是哪種類型的文件，use中的每一項則是處理該類文件需要的loader。
注意：css-loader這個loader的作用是用來讓main.js文件加載該css文件，而style-loader的作用是將模塊的導出作為樣式添加到 DOM 中。這里可能有人會有疑問：按這樣的作用來講的話應該先加載文件再作為樣式添加到DOM中去才對，那數組中的順序應該不是這樣的。我在這里很明確的告訴你，你的想法是沒有錯的，只是webpack他這一點非常的奇特，它是從數組的最后一個元素，從右到左的順序加載loader的。
- 設置依賴，下載好loader並配置完之后，我們再運行之后便發現css文件中的樣式就出來了。
