webpack加載css文件及其配置

• 當(dāng)我們寫了幾個css文件之后如果想要引用到html中去的話我們最開始的方式就是通過link標(biāo)簽將css文件導(dǎo)入進(jìn)去，但是如果我們的css文件有很多的話，一個個的導(dǎo)入是不推薦的；而現(xiàn)在我們學(xué)了webpack，我們希望的是通過打包bundle.js文件，將所有的依賴文件全部導(dǎo)入進(jìn)去。
• 我們要知道的是，如果在入口函數(shù)main.js文件中如果沒有導(dǎo)入css文件，那么打包的bundle.js文件必然不會有css文件，所有我們需要讓main.js文件依賴css文件。
• 使用代碼：require('css文件地址')
• 依賴完之后，我們再打包一下 npm run build 會發(fā)現(xiàn)報錯了。錯誤為：You may need an appropriate loader to handle this file type。意思是說你可能需要一個合適的loader來處理這個文件
• 于是我們打開webpack的中文網(wǎng)址，在里面找到了我們需要安裝 css-loader 和 style-loader 這兩個loader。并且我們還需要在webpack.config.js文件中配置一下這些loader
• 于是我們使用npm下載這兩個依賴，代碼如下：npm install css-loader style-loader --save-dev
• 在webpack.config.js文件中，有一個module的屬性，該屬性為一個對象，在該對象中有個rules屬性，是一個數(shù)組，數(shù)組中的每一項(xiàng)都是處理不同文件loader所需要的對象。代碼如下：

const path = require('path');
    module.exports = {
        // 在配置文件中，手動指定 入口 文件和 出口 文件
        mode:'development',   //  webpack4.x版本中需要加入這個屬性
        entry:'./src/main.js',  //  入口文件
        output:{  //  出口文件
            path:path.resolve(__dirname,'dist'),  //  指定將要打包好的文件應(yīng)該要輸出到哪個地方去（注意：路徑必須是絕對地址）
            filename: 'bundle.js' //  指定輸出文件的文件名
        },
        module:{
            rules:[
            {test:/\.css$/ , use:['style-loader' , 'css-loader']}
            ]
        }
    }

其中test表示我們要處理的是哪種類型的文件，use中的每一項(xiàng)則是處理該類文件需要的loader。

注意：css-loader這個loader的作用是用來讓main.js文件加載該css文件，而style-loader的作用是將模塊的導(dǎo)出作為樣式添加到 DOM 中。這里可能有人會有疑問：按這樣的作用來講的話應(yīng)該先加載文件再作為樣式添加到DOM中去才對，那數(shù)組中的順序應(yīng)該不是這樣的。我在這里很明確的告訴你，你的想法是沒有錯的，只是webpack他這一點(diǎn)非常的奇特，它是從數(shù)組的最后一個元素，從右到左的順序加載loader的。

設(shè)置依賴，下載好loader并配置完之后，我們再運(yùn)行之后便發(fā)現(xiàn)css文件中的樣式就出來了。

總結(jié)

以上所述是小編給大家介紹的webpack加載css文件及其配置方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論