一、webpack的基本介紹
它是一個(gè)給js準(zhǔn)備的一個(gè)打包工具，可以把很多的模塊打包成很少的一些靜態(tài)文件
webpack的特性：
1悼沈、代碼分割：可以使得項(xiàng)目在加載的過(guò)程中只加載那些項(xiàng)目中當(dāng)時(shí)所需要的文件
2嘲叔、loader：模塊可以通過(guò)loader去處理各種各樣的文件（比如：js文件、css文件蜒犯、less文件组橄、sass文件、圖片等等）
3罚随、插件系統(tǒng)模塊熱更新：允許在運(yùn)行時(shí)替換玉工、添加、刪除各種模塊淘菩，而無(wú)需進(jìn)行完全刷新加載整個(gè)頁(yè)面
模塊熱更新特點(diǎn)：
a).保留在完全重新加載頁(yè)面時(shí)丟失的應(yīng)用程序的狀態(tài)
b).只更新改變的內(nèi)容遵班，以節(jié)省開發(fā)時(shí)間
c).調(diào)整樣式更加快速，幾乎等同于就在瀏覽器調(diào)試器中更改樣式
二潮改、webpack安裝和命令行
在安裝webpack前狭郑，本地環(huán)境需要支持nodejs
npm install webpack -g //全局安裝
npm install webpack --save-dev //項(xiàng)目中安裝
接下來(lái)我們創(chuàng)建一個(gè)項(xiàng)目，新建一個(gè)文件夾webpackDemo
然后npm init 出一個(gè)大概的框架
在 webpackDemo目錄下添加 hello.js 文件汇在，代碼如下：
function hello(str) {
alert(str)
}
hello('你好')
接下來(lái)我們使用 webpack 命令來(lái)打包這個(gè)js：
webpack hello.js bundle.js //webpack后面加的是要打包的js文件和打包完后生成的文件名翰萨。
執(zhí)行以上命令會(huì)編譯hello.js 文件并生成bundle.js 文件，成功后輸出信息如下所示：
Hash: a41c6217554e666594cb
Version: webpack 1.13.2
Time: 53ms
Asset Size Chunks Chunk Names
bundle.js 1.43 kB 0 [emitted] main
[0] ./hello.js 39 bytes {0} [built]
然后在 webpackDemo目錄下添加 index.html 文件糕殉，代碼如下：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<--引入打包好的文件-->
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
webpack 根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析亩鬼，當(dāng)一個(gè)文件(模塊)引入了一個(gè)文件(模塊)都會(huì)被包含到 bundle.js 文件中。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過(guò)這個(gè) id 索引和訪問(wèn)模塊阿蝶。 在頁(yè)面啟動(dòng)時(shí)辛孵，會(huì)先執(zhí)行第一個(gè)js 中的代碼，其它模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行赡磅。
