加載圖片

First of all ,我們需要安裝對應的loader,它會將樣式中引用到的圖片轉換為模塊來進行處理,ok我們開始安裝:

npm install url-loader --save-dev

當然也可以去 package.json 中添加依賴,然後 npm install 是一樣的效果

現在我們去項目目錄下創建一個img的文件夾,放兩張圖分別為png格式和jpg格式。

然後修改 webpack.package.js:

loaders: [
    { test: /\.css$/, loader: "style-loader!css-loader" },
    { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" }   // 添加到這!並且會按照文件大小, 或者轉化為 base64, 或者單獨作為文件
    //在大小限制后可以加上&name=./[name].[ext],會將我們的文件生成在設定的文件夾下。
]

接下來在index.html中添加:

![](img/m.png)
<div id="pic1"></div>
<div id="pic2"></div>

然後在css中添加:

#pic1{
    width: 300px;
    height: 300px;
    background-image: url(img/m.png);
}
#pic2{
    width: 200px;
    height: 200px;
    background-image: url(img/shaizi.jpg);
}

繼續運行webpack,如果正確無報錯直接打開瀏覽器就可以看到圖片,如果報錯,運行如下命令:

npm install file-loader --save-dev

再次進行嘗試!

現在我們打開瀏覽器的調試工具,可以看到小於8K的 背景圖片 圖片已經被轉化成了base64的編碼,而大於8k的圖片則並沒有轉化(注意它的地址的變化!)。 直接使用img導入的圖也並沒有進行base64的轉化。

熱加載

當項目逐漸豐滿健壯起來的時候,webpack的編譯時間會變長,可以通過設置一些參數讓編譯輸出的內容帶有進度和顏色

webpack --progress --colors
  1. 最基本的啟動webpack命令。
    webpack
  2. 提供watch方法,實時進行打包更新。
    webpack -w
  3. 對打包后的文件進行壓縮
webpack -p
  1. 提供SourceMaps,方便調試
webpack -d
  1. 輸出性能數據,可以看到每一步的耗時
webpack --profile
  1. 默認情況下 node_modules 下的模塊會被隱藏,加上這個參數可以显示這些被隱藏的模塊
webpack --display-modules

Tips

在編程過程中,你會不會覺得我們每次做一些修改都要反反覆復去命令行里敲這個webpack很繁瑣,所以webpack人性化的有一種監聽的機制,下面介紹。

webpack 為我們提供了一個webpack –watch,他會啟動監聽模式。開啟監聽模式后,沒有變化的模塊會在編譯后緩存到內存中,而不會每次都被重新編譯,所以監聽模式的整體速度是很快的。

在我們執行該命令后,修改一下css樣式表,刷新瀏覽器發現樣式發生了我們預期要的變化,但是顯然這個還要我們去手動刷新瀏覽器,這不是我想要的結果,所以使用webpack-dev-server會是一個更好的辦法!

安裝  npm install webpack -dev-server -g

運行  webpack -dev-server


分享