-
安裝webpack
首先需要安裝node.js環(huán)境,見node官網(wǎng).
安裝nodejs后使用npm 安裝 webpack命令$ npm install webpack -g
這樣webpack 命令即能在全局環(huán)境下使用
-
webpack小示例第一步
創(chuàng)建空目錄Demo文件夾 文件夾中創(chuàng)建app空文件夾
在app文件夾中創(chuàng)建entry.js文件
文件內(nèi)容如下 --entry.jsdocument.write("It works.");在app文件夾中創(chuàng)建 index.html
文件內(nèi)容如下 --index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack入門</title> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>執(zhí)行命令：
$ cd Demo/app $ webpack ./entry.js bundle.js
該命令會(huì)對(duì)entry.js文件編譯并創(chuàng)建一個(gè)bundle.js文件
如果成功的話，它會(huì)顯示如下：
Hash: ca188ee5789bb780fcec
Version: webpack 1.13.0
Time: 65ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./entry.js 28 bytes {0} [built]
在瀏覽器中打開index.html 顯示 It works.
-
第二步依賴文件加載
在app文件夾下添加content.js內(nèi)容為
module.exports = "It works from content.js.";更改entry.js文件內(nèi)容為:
document.write(require("./content.js"));執(zhí)行命令：
$ webpack ./entry.js bundle.js刷新瀏覽器index.html頁(yè)面, 顯示It works from content.js.
webpack會(huì)分析你的輸入文件的依賴的其他文件旗国。這些文件（稱為模塊）都會(huì)最終包含在你的bundle.js中。webpack會(huì)給每個(gè)模塊的一個(gè)獨(dú)特的ID以及保存所有模塊的ID以便在bundle.js文件訪問(wèn)勒庄。僅在啟動(dòng)時(shí)執(zhí)行輸入模塊，在運(yùn)行時(shí)提供需要的功能瘫里，并在需要時(shí)執(zhí)行依賴实蔽。 -
第一次使用loaders
我們要添加一個(gè)CSS文件到我們的示例中
webpack只能處理JavaScript本身，所以我們需要css-loader去裝載CSS文件,同樣也需要style-loader谨读。
執(zhí)行命令$ npm install css-loader style-loader在app文件夾下添加style.css文件
文件內(nèi)容如下--style.cssbody { background: yellow; }
更新entry.js文件
require("!style!css!./style.css");
document.write(require("./content.js"));
執(zhí)行命令：
$ webpack ./entry.js bundle.js
刷新瀏覽器index.html頁(yè)面, 顯示帶有黃色背景的It works from content.js.
webpack只能處理JavaScript本身局装，style.css通過(guò)!style!css!裝載機(jī)管道以特定的方式中改變輸出 bundle.js 文件的內(nèi)容。這些轉(zhuǎn)換后的結(jié)果是一個(gè)JavaScript模塊劳殖。
如果我們不想使用 require("!style!css!./style.css");
而想直接使用require("./style.css");
更新entry.js文件內(nèi)容為:
require("./style.css");
document.write(require("./content.js"));
執(zhí)行命令時(shí)要綁定加載模塊：
$ webpack ./entry.js bundle.js --module-bind 'css=style!css'
刷新瀏覽器index.html頁(yè)面, 顯示同樣的效果铐尚。
某些環(huán)境下這里可能要用雙引號(hào) "css=style!css"
-
使用配置文件 webpack.config.js
在Demo文件夾下創(chuàng)建webpack.config.js
文件內(nèi)容如下:module.exports = { entry: "./app/entry.js", output: { path: __dirname, filename: "./app/bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } };現(xiàn)在只需要在Demo目錄下執(zhí)行命令:
$ webpack 執(zhí)行成功會(huì)顯示: Hash: ab14e3789227f2cbf6c0 Version: webpack 1.13.0 Time: 955ms Asset Size Chunks Chunk Names ./app/bundle.js 11.8 kB 0 [emitted] main [0] ./app/entry.js 67 bytes {0} [built] [5] ./app/content.js 45 bytes {0} [built] + 4 hidden moduleswebpack會(huì)自動(dòng)加載當(dāng)前目錄下的webpack.config.js文件
-
漂亮的輸出
隨著項(xiàng)目的增長(zhǎng)，編譯可能需要更長(zhǎng)的時(shí)間哆姻。所以我們要展示一些進(jìn)度條宣增、顏色…可以使用命令$webpack --progress --colors -
使用watch model
使用watch model模式時(shí)，可理解為監(jiān)聽模式,如果檢測(cè)到任何文件更改矛缨，它將再次運(yùn)行編譯爹脾。$webpack --watch -
使用webpack開發(fā)服務(wù)器
// npm 全局安裝webpack開發(fā)服務(wù)器 $ npm install webpack-dev-server -g 在Demo文件夾下執(zhí)行 $ webpack-dev-server --progress --colorswebpack-dev-server 會(huì)在本地提供一個(gè)靜態(tài)文件服務(wù)器
http://localhost:8080/webpack-dev-server/
同時(shí)內(nèi)部也在使用webpack的watc模式自動(dòng)編譯更新
瀏覽器中打開http://localhost:8080/webpack-dev-server/
只要文件有更新 瀏覽器也會(huì)自動(dòng)刷新頁(yè)面。
