webpack加載css文件及其配置

webpack加載css文件及其配置

1. 當咱們寫了幾個css文件以後若是想要引用到html中去的話咱們最開始的方式就是經過link標籤將css文件導入進去，可是若是咱們的css文件有不少的話，一個個的導入是不推薦的；而如今咱們學了webpack，咱們但願的是經過打包bundle.js文件，將全部的依賴文件所有導入進去。
2. 咱們要知道的是，若是在入口函數main.js文件中若是沒有導入css文件，那麼打包的bundle.js文件必然不會有css文件，全部咱們須要讓main.js文件依賴css文件。
3. 使用代碼：require('css文件地址')
4. 依賴完以後，咱們再打包一下 npm run build 會發現報錯了。錯誤爲：You may need an appropriate loader to handle this file type。意思是說你可能須要一個合適的loader來處理這個文件
5. 因而咱們打開webpack的中文網址，在裏面找到了咱們須要安裝 css-loader 和 style-loader 這兩個loader。而且咱們還須要在webpack.config.js文件中配置一下這些loader
6. 因而咱們使用npm下載這兩個依賴，代碼以下：npm install css-loader style-loader --save-dev
7. 在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']}
            ]
        }
    }

1. 其中test表示咱們要處理的是哪一種類型的文件，use中的每一項則是處理該類文件須要的loader。
   注意：css-loader這個loader的做用是用來讓main.js文件加載該css文件，而style-loader的做用是將模塊的導出做爲樣式添加到 DOM 中。這裏可能有人會有疑問：按這樣的做用來說的話應該先加載文件再做爲樣式添加到DOM中去纔對，那數組中的順序應該不是這樣的。我在這裏很明確的告訴你，你的想法是沒有錯的，只是webpack他這一點很是的奇特，它是從數組的最後一個元素，從右到左的順序加載loader的。
2. 設置依賴，下載好loader並配置完以後，咱們再運行以後便發現css文件中的樣式就出來了。