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檔案中的樣式就出來了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/169440.html
標籤：JavaScript
下一篇：JavaScript呼叫百度地圖