加載圖片
First of all 大莫，我們需要安裝對(duì)應(yīng)的loader，它會(huì)將樣式中引用到的圖片轉(zhuǎn)換為模塊來進(jìn)行處理敏沉，ok我們開始安裝：
npm install url-loader --save-dev
當(dāng)然也可以去 package.json 中添加依賴腐芍，然后 npm install 是一樣的效果
現(xiàn)在我們?nèi)ロ?xiàng)目目錄下創(chuàng)建一個(gè)img的文件夾养筒，放兩張圖分別為png格式和jpg格式。
然后修改 webpack.package.js:
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" } // 添加到這斩披！并且會(huì)按照文件大小, 或者轉(zhuǎn)化為 base64, 或者單獨(dú)作為文件
//在大小限制后可以加上&name=./[name].[ext]溜族，會(huì)將我們的文件生成在設(shè)定的文件夾下。
]
接下來在index.html中添加：
<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);
}
繼續(xù)運(yùn)行webpack垦沉，如果正確無報(bào)錯(cuò)直接打開瀏覽器就可以看到圖片煌抒，如果報(bào)錯(cuò)，運(yùn)行如下命令：
npm install file-loader --save-dev
再次進(jìn)行嘗試厕倍！
現(xiàn)在我們打開瀏覽器的調(diào)試工具寡壮，可以看到小于8K的 背景圖片 圖片已經(jīng)被轉(zhuǎn)化成了base64的編碼，而大于8k的圖片則并沒有轉(zhuǎn)化（注意它的地址的變化６锿洹）况既。 直接使用img導(dǎo)入的圖也并沒有進(jìn)行base64的轉(zhuǎn)化。
熱加載
當(dāng)項(xiàng)目逐漸豐滿健壯起來的時(shí)候组民，webpack的編譯時(shí)間會(huì)變長(zhǎng)棒仍，可以通過設(shè)置一些參數(shù)讓編譯輸出的內(nèi)容帶有進(jìn)度和顏色
webpack --progress --colors
- 最基本的啟動(dòng)webpack命令。
webpack
- 提供watch方法邪乍，實(shí)時(shí)進(jìn)行打包更新降狠。
webpack -w
- 對(duì)打包后的文件進(jìn)行壓縮
webpack -p
- 提供SourceMaps，方便調(diào)試
webpack -d
- 輸出性能數(shù)據(jù)庇楞，可以看到每一步的耗時(shí)
webpack --profile
- 默認(rèn)情況下 node_modules 下的模塊會(huì)被隱藏榜配，加上這個(gè)參數(shù)可以顯示這些被隱藏的模塊
webpack --display-modules
Tips
在編程過程中，你會(huì)不會(huì)覺得我們每次做一些修改都要反反復(fù)復(fù)去命令行里敲這個(gè)webpack很繁瑣吕晌，所以webpack人性化的有一種監(jiān)聽的機(jī)制蛋褥，下面介紹。
webpack 為我們提供了一個(gè)webpack --watch睛驳，他會(huì)啟動(dòng)監(jiān)聽模式烙心。開啟監(jiān)聽模式后膜廊，沒有變化的模塊會(huì)在編譯后緩存到內(nèi)存中，而不會(huì)每次都被重新編譯淫茵，所以監(jiān)聽模式的整體速度是很快的爪瓜。
在我們執(zhí)行該命令后，修改一下css樣式表匙瘪，刷新瀏覽器發(fā)現(xiàn)樣式發(fā)生了我們預(yù)期要的變化铆铆，但是顯然這個(gè)還要我們?nèi)ナ謩?dòng)刷新瀏覽器，這不是我想要的結(jié)果丹喻，所以使用webpack-dev-server會(huì)是一個(gè)更好的辦法薄货！
安裝 npm install webpack -dev-server -g
運(yùn)行 webpack -dev-server
