第二課：webpack配置醒目加載各種靜態資源（圖片，css預處理器） 上一節我們使用webpack來加載了.vue文件，這節課我們使用它加載各種靜態資源，加載靜態資源的方法和加載.vue文件的方法是相同的，即配置loader module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: '\.(gif|jpg|jpeg|png|svg)$', use: [ { loader: 'url-loader', options: { limit: 1024, name: '[name]-aaa.[ext]' } } ] } ] } css-loader只是幫我們處理了css文件，而css需要寫到html文件中才能正常的起到作用，換言之css-loader只能處理外鏈的css樣式，而內聯樣式和行內樣式它無法處理，這是我們還需要配合使用style-loader來處理所有的css。也就是處理.css需要兩個loader(css-loader、style-loader)。這兩個loader如何書寫呢？方法有兩個： 方法1：使用use配置項替代loader配置項，use接收一個數組，數組中是多個loader url-loader可以把圖片資源處理成base64編碼的圖片資源寫入js文件，而不用生成一個新的圖片文件。這種方式對于一些小的圖片是比較適用的（比如小于1M的文件），可以減少http請求。但是比較大的圖片就不適用了，因為處理之后的base64代碼會非常多， 無形的增大js文件的體積。 所以在配置圖片處理器的時候，我們向use數組中傳入的是對象，因為該對象有個options配置項，可以為loader配置一些參數，例如上面的limit: 1024，告訴url-loader在處理圖片時小于1024kb的圖片進行base64，超過1024kb的不做處理。 url-loader其實是封裝了一下file-loader，file-loader讀取圖片并且做一些簡單的操作之后，將圖片文件換一個名字然后再換一個地方將其存起來。而url-loader是判斷一下這個文件如果小于1024kb的話，就把這個文件進行base64然后插入到js文件中去。 name用來指定輸出的圖片文件的名字，其中[name]表示原文件名，[ext]表示原文件的后綴 OK，現在我們去安裝這些loader style-loader url-loader file-loader(安裝file-loader是因為url-loader依賴于file-loader) 安裝完這些loader之后我們就可以在代碼中import進來圖片資源了，現在我們在src目錄下創建assets目錄，該目錄用來存放圖片資源和樣式資源。assets目錄中繼續創建兩個目錄images和styles images目錄用來存放圖片； styles目錄用來存放樣式； 我們在styles目錄下創建一個test.css文件： body { color: blue; background-image: url('../images/bg.jpeg'); } 在images目錄下放入一個圖片，這里我放入的是bg.jpeg圖片 接下來在入口文件index.js文件中去import進來test.css文件和bg.jpeg文件 import './assets/styles/test.css' import ‘./assets/images/bg.jpeg’ 神奇之處在于：test.css文件中依賴了bg.jpeg文件，webpack依然會幫我們打包bg.jpeg文件 css文件功能太有限，并且書寫起來非常麻煩，所以我們可以使用css預處理器來解決這些問題，例如sass ，想使用它我們當然也需要配置loader