webpack 是一個(gè)用來(lái)構(gòu)建我們應(yīng)用程序中的 JavaScript 模塊的工具亿乳。webpack 通過(guò)快速建立應(yīng)用程序依賴圖表并以正確的順序打包它們來(lái)簡(jiǎn)化你的工作流挥转。你能夠針對(duì)你的代碼來(lái)對(duì) webpack 進(jìn)行自定義的優(yōu)化配置沽损，比如為生產(chǎn)環(huán)境拆分 vendor/css/js 代碼鸽凶，對(duì)圖片進(jìn)行base64轉(zhuǎn)碼李剖，通過(guò)運(yùn)行開(kāi)發(fā)服務(wù)器（development server）來(lái)實(shí)現(xiàn)無(wú)刷新熱重載（hot-reload）通過(guò)babel進(jìn)行es6的轉(zhuǎn)碼救崔，可以解析市面上很多預(yù)css編譯等很多酷炫的特性扶供。
我們先嘗個(gè)鮮筛圆，創(chuàng)建一個(gè)示例來(lái)演示一下
因?yàn)楝F(xiàn)在是基于2.0的講解，在開(kāi)始前椿浓，先要確認(rèn)你已經(jīng)安裝 Node.js 的最新版本太援。使用 Node.js 最新的 LTS 版本，是理想的起步扳碍。使用舊版本提岔，你可能遇到各種問(wèn)題，因?yàn)樗鼈兛赡苋鄙?webpack 功能或缺少相關(guān) package 包笋敞。
如何安裝npm我就不多說(shuō)了碱蒙，大家都知道的，網(wǎng)上的例子很多夯巷，這里就不多敘述了
注意
我們先全局安裝一下通過(guò)
npm install webpack -g
安裝好之后我們看一下webpack的版本
webpack --help || webpack -v 這里就會(huì)顯示版本號(hào)如果是2.0以上的沒(méi)有問(wèn)題
如果以前在全局安裝過(guò)的話請(qǐng)自己升個(gè)級(jí)
npm install webpack -g
我們來(lái)試著弄一個(gè)demo,本人用的是windows,打開(kāi)cmd
mkdir wepback2.0 && cd webpack2.0
再生成一個(gè)package.json文件,這是一個(gè)存方說(shuō)明的文件赛惩，以json的格式存放，每個(gè)字段都代表不同的含義趁餐，不懂的可以看這個(gè)阮大神的講解http://javascript.ruanyifeng.com/nodejs/packagejson.html
先簡(jiǎn)單的初始化
npm init -y
建一個(gè) app文件夾喷兼，再app里創(chuàng)建一個(gè) index.js 文件。
app/index.js
function component () {
var element = document.createElement('div');
/* 需要引入 lodash后雷，下一行才能正常工作 */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component())
我們?cè)诟夸浵略賱?chuàng)建一個(gè)Index.html
要運(yùn)行這段代碼季惯，通常需要有以下 HTML ：
webpack2.0/index.html
<html>
<head>
<title>webpack 2 demo</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
在此示例中吠各，<script> 標(biāo)簽之間存在隱式依賴關(guān)系。
常規(guī)用法存在的問(wèn)題
運(yùn)行 index.js 會(huì)依賴于頁(yè)面中提前引入的 lodash星瘾。之所以說(shuō)是隱式的是因?yàn)?index.js 并未顯式聲明需要引入 lodash走孽，只是假定推測(cè)已經(jīng)存在一個(gè)全局變量 _。
使用這種方式去管理 JavaScript 項(xiàng)目會(huì)有一些問(wèn)題：
如果依賴不存在琳状，或者引入順序錯(cuò)誤磕瓷，應(yīng)用程序?qū)o(wú)法正常運(yùn)行。
如果依賴被引入但是并沒(méi)有使用念逞，那樣就會(huì)存在許多瀏覽器不得不下載的無(wú)用代碼困食。
用webpack打包的改進(jìn)方案
要在 index.js 中打包 lodash 依賴，首先我們需要安裝 lodash翎承。
npm install --save lodash
因?yàn)樵谏a(chǎn)環(huán)境我們?nèi)褂玫絣odash硕盹，所以我們不用加-dev
然后引入（import）它。
app/index.js
+ import _ from 'lodash';
function component () {
｝
當(dāng)然我們還要修改 index.html叨咖，來(lái)引入打包好的單個(gè) js 文件瘩例。
<html>
<head>
<title>webpack 2 demo</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="app/index.js"></script>
+ <script src="dist/bundle.js"></script>
</body>
</html>
在這里，index.js 顯式要求引入的 lodash 必須存在甸各，然后將它以 _ 的別名綁定（不會(huì)造成全局范圍變量名污染）垛贤。
通過(guò)聲明模塊所需的依賴，webpack 能夠利用這些信息去構(gòu)建依賴圖表趣倾，然后使用圖表生成一個(gè)優(yōu)化過(guò)的聘惦，會(huì)以正確代碼順序被運(yùn)行的 bundle。并且沒(méi)有用到的依賴將不會(huì)被 bundle 引入儒恋。
現(xiàn)在在此文件夾下帶上以下參數(shù)運(yùn)行 webpack善绎，其中 index.js 是入口文件，bundle.js 是已打包所需的所有代碼的輸出文件诫尽。因?yàn)槲覀兦懊嫒职惭b過(guò)了webpack禀酱，所以我們可以在任何盤(pán)下運(yùn)行
webpack js/index.js dist/bundle.js
//js/index代表我們要打包的文
//dist/bundle.js代表我們打到后的文件
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./app/index.js 278 bytes {0} [built]
在瀏覽器中打開(kāi) index.html，查看構(gòu)建成功后的 bundle 的結(jié)果牧嫉。你應(yīng)該能看到帶有以下文本的頁(yè)面：‘Hello webpack’剂跟。
你注意到在 app/index.js
中使用的 ES2015 模塊引用（module import） 了嗎？盡管 import/export
語(yǔ)句在瀏覽器中還未被支持驹止，你也可以正常的使用，因?yàn)?webpack 會(huì)將其替換為 ES5 兼容的代碼观蜗。你可以審查 dist/bundle.js 的代碼來(lái)說(shuō)服你自己放心使用臊恋。
注意 webpack 將不會(huì)更改你的 import/export
除外的代碼。如果你在使用其它 ES2015 特性墓捻，確保你使用了一個(gè)像是 Babel 或 Bublé 的轉(zhuǎn)譯器抖仅。
使用帶有配置的 webpack
對(duì)于更復(fù)雜的配置坊夫，我們可以使用一個(gè)配置文件，webpack 會(huì)參考它來(lái)打包代碼撤卢。創(chuàng)建一個(gè) webpack.config.js 文件后环凿，你可以通過(guò)以下配置向 CLI 命令傳達(dá)和前面一樣的信息。
我們還是像在根目錄下創(chuàng)建一個(gè)webpack.config.js
這個(gè)跟我們?cè)赾li命令行輸入命令一下放吩，后面webpack會(huì)通過(guò)解析這個(gè)文件來(lái)知道你所需要的配置
var path = require('path'); //這個(gè)是引入Node的path路徑模塊用來(lái)解析路徑的
var webpack = require("webpack"); //引入webpack來(lái)進(jìn)行
module.exports = {
entry: './js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
配合 npm 使用
考慮到用 CLI 這種方式來(lái)運(yùn)行 webpack 不是特別方便智听，我們可以設(shè)置一個(gè)快捷方式。像這樣調(diào)整 package.json：
{
...
"scripts": {
"build": "webpack" //我們能過(guò)package.json里的script腳本來(lái)進(jìn)行啟動(dòng)
},
...
}
現(xiàn)在你可以通過(guò)使用 npm run build 命令來(lái)實(shí)現(xiàn)與上面相同的效果渡紫。npm 通過(guò)命令選取腳本到推，并臨時(shí)修補(bǔ)執(zhí)行環(huán)境
