站長(zhǎng)資訊網(wǎng)Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。
本章節(jié)基于 Webpack3.0 測(cè)試通過(guò)。
從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁(yè)面的請(qǐng)求。
接下來(lái)我們簡(jiǎn)單為大家介紹 Webpack 的安裝與使用。
安裝 Webpack
在安裝 Webpack 前，你本地環(huán)境需要支持 node.js。
由于 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。
使用 cnpm 安裝 webpack：
cnpm install webpack -g
創(chuàng)建項(xiàng)目
接下來(lái)我們創(chuàng)建一個(gè)目錄 app：
mkdir app
在 app 目錄下添加 runoob1.js 文件，代碼如下：
document.write("It works.");
在 app 目錄下添加 index.html 文件，代碼如下：
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
接下來(lái)我們使用 webpack 命令來(lái)打包：
webpack runoob1.js bundle.js
執(zhí)行以上命令會(huì)編譯 runoob1.js 文件并生成bundle.js 文件，成功后輸出信息如下所示：
Hash: a41c6217554e666594cb Version: webpack 1.12.13 Time: 50ms Asset Size Chunks Chunk Names bundle.js 1.42 kB 0 [emitted] main [0] ./runoob1.js 29 bytes {0} [built]
在瀏覽器中打開(kāi) index.html，輸出結(jié)果如下：
創(chuàng)建第二個(gè) JS 文件
接下來(lái)我們創(chuàng)建另外一個(gè) js 文件 runoob2.js，代碼如下所示：
module.exports = "It works from runoob2.js.";
更新 runoob1.js 文件，代碼如下：
document.write(require("./runoob2.js"));
接下來(lái)我們使用 webpack 命令來(lái)打包：
webpack runoob1.js bundle.js Hash: dcf55acff639ebfe1677 Version: webpack 1.12.13 Time: 52ms Asset Size Chunks Chunk Names bundle.js 1.55 kB 0 [emitted] main [0] ./runoob1.js 41 bytes {0} [built] [1] ./runoob2.js 46 bytes {0} [built]
在瀏覽器訪問(wèn)，輸出結(jié)果如下所示：
webpack 根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，這些文件(模塊)會(huì)被包含到 bundle.js 文件中。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過(guò)這個(gè) id 索引和訪問(wèn)模塊。 在頁(yè)面啟動(dòng)時(shí)，會(huì)先執(zhí)行 runoob1.js 中的代碼，其它模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行。
LOADER
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類(lèi)型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。
所以如果我們需要在應(yīng)用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會(huì)遍歷 CSS 文件，然后找到 url() 表達(dá)式然后處理他們，style-loader 會(huì)把原來(lái)的 CSS 代碼插入頁(yè)面中的一個(gè) style 標(biāo)簽中。
接下來(lái)我們使用以下命令來(lái)安裝 css-loader 和 style-loader(全局安裝需要參數(shù) -g)。
cnpm install css-loader style-loader
執(zhí)行以上命令后，會(huì)再當(dāng)前目錄生成 node_modules 目錄，它就是 css-loader 和 style-loader 的安裝目錄。
接下來(lái)創(chuàng)建一個(gè) style.css 文件，代碼如下：
body { background: yellow; }
修改 runoob1.js 文件，代碼如下：
require("!style-loader!css-loader!./style.css"); document.write(require("./runoob2.js"));
接下來(lái)我們使用 webpack 命令來(lái)打包：
webpack runoob1.js bundle.js Hash: a9ef45165f81c89a4363 Version: webpack 1.12.13 Time: 619ms Asset Size Chunks Chunk Names bundle.js 11.8 kB 0 [emitted] main [0] ./runoob1.js 76 bytes {0} [built] [5] ./runoob2.js 46 bytes {0} [built] + 4 hidden modules
在瀏覽器訪問(wèn)，輸出結(jié)果如下所示：
require CSS 文件的時(shí)候都要寫(xiě) loader 前綴 !style-loader!css-loader!，當(dāng)然我們可以根據(jù)模塊類(lèi)型（擴(kuò)展名）來(lái)自動(dòng)綁定需要的 loader。 將 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改為 require("./style.css") ：
runoob1.js 文件
require("./style.css"); document.write(require("./runoob2.js"));
然后執(zhí)行：
webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'
在瀏覽器訪問(wèn)，輸出結(jié)果如下所示：
顯然，這兩種使用 loader 的方式，效果是一樣的。
配置文件
我們可以將一些編譯選項(xiàng)放在配置文件中，以便于統(tǒng)一管理：
創(chuàng)建 webpack.config.js 文件，代碼如下所示：
module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style-loader!css-loader" } ] } };
接下來(lái)我們只需要執(zhí)行 webpack 命令即可生成 bundle.js 文件：
webpack Hash: 4fdefac099a5f36ff74b Version: webpack 1.12.13 Time: 576ms Asset Size Chunks Chunk Names bundle.js 11.8 kB 0 [emitted] main [0] ./runoob1.js 65 bytes {0} [built] [5] ./runoob2.js 46 bytes {0} [built] + 4 hidden modules
webpack 命令執(zhí)行后，會(huì)默認(rèn)載入當(dāng)前目錄的 webpack.config.js 文件。
插件
插件在 webpack 的配置信息 plugins 選項(xiàng)中指定，用于完成一些 loader 不能完成的工。
webpack 自帶一些插件，你可以通過(guò) cnpm 安裝一些插件。
使用內(nèi)置插件需要通過(guò)以下命令來(lái)安裝：
cnpm install webpack --save-dev
比如我們可以安裝內(nèi)置的 BannerPlugin 插件，用于在文件頭部輸出一些注釋信息。
修改 webpack.config.js，代碼如下：
var webpack=require('webpack'); module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style-loader!css-loader" } ] }, plugins:[ new webpack.BannerPlugin('菜鳥(niǎo)教程 webpack 實(shí)例') ] };
然后運(yùn)行:
webpack
打開(kāi) bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息。
開(kāi)發(fā)環(huán)境
當(dāng)項(xiàng)目逐漸變大，webpack 的編譯時(shí)間會(huì)變長(zhǎng)，可以通過(guò)參數(shù)讓編譯的輸出內(nèi)容帶有進(jìn)度和顏色。
webpack --progress --colors
如果不想每次修改模塊后都重新編譯，那么可以啟動(dòng)監(jiān)聽(tīng)模式。開(kāi)啟監(jiān)聽(tīng)模式后，沒(méi)有變化的模塊會(huì)在編譯后緩存到內(nèi)存中，而不會(huì)每次都被重新編譯，所以監(jiān)聽(tīng)模式的整體速度是很快的。
webpack --progress --colors --watch
當(dāng)然，我們可以使用 webpack-dev-server 開(kāi)發(fā)服務(wù)，這樣我們就能通過(guò) localhost:8080 啟動(dòng)一個(gè) express 靜態(tài)資源 web 服務(wù)器，并且會(huì)以監(jiān)聽(tīng)模式自動(dòng)運(yùn)行 webpack，在瀏覽器打開(kāi) http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項(xiàng)目中的頁(yè)面和編譯后的資源輸出，并且通過(guò)一個(gè) socket.io 服務(wù)實(shí)時(shí)監(jiān)聽(tīng)它們的變化并自動(dòng)刷新頁(yè)面。
# 安裝 cnpm install webpack-dev-server -g # 運(yùn)行 webpack-dev-server --progress --colors
在瀏覽器打開(kāi) http://localhost:8080/ 輸出結(jié)果如下：
相關(guān)教程推薦：webpack 中文文檔
