一、簡單介紹
給JavaScript準備的一個打包工具，有個特性代碼分割，它允許按需加載應用程序的部分。還有loader的概念，通過相應的Loader來處理相關的文件。所有文件都可看成是一個模塊。
二、命令行中使用
ps:我使用的git命令行工具。
1、npm init初始化項目生成一個pack.json文件
2、安裝webpack npm install webpack --save-dev會生成一個node_modules文件夾
3、 本節常用的命令
1) webpack main.js mian.bundle.js
說明讓webpack執行打包命令main.js是要進行打包的文件名稱，mian.bundle.js是打包后文件的名稱。
2) --module-bind
說明給制定類型文件設置制定的loader進行解析。
3) --progress
查看打包進程
4) --display-moudles
查看打包的模塊
5) --display-reasons
查看打包該模塊的原因
6) --watch
監聽改變后可自動進行打包
選項：
--help, -h 顯示幫助信息 [布爾]
--version, -v 顯示版本號 [布爾]
--json, -j Prints the result as JSON.
三、第一個實例
項目需求：頁面中有個id為box的元素水平居中顯示，點擊“走一個按鈕”隨機改變box的背景色。
**1、 **目錄結構
|--webpack_170630
---index.html => 主頁面
---main.js => 主要的js文件
---rnd.js => 生成隨機數的js文件
---style.css => 外部樣式表
**2、 **頁面代碼
html頁面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
</head>
<body>
<div id="box">
我是Box
<input type="button" id="btn" value="走一個" />
</div>
<script src="main.bundle.js"></script>
</body>
</html>
main.js頁面代碼
var fn = require('./rnd.js');//此處引入用的require
//require('style-loader!css-loader!./style.css');//也可以在引入文件的時候進行規定指定的loader
require('./style.css');
window.addEventListener('DOMContentLoaded',function(){
console.log('頁面加載完成');
console.log(fn);
var oBox = document.getElementById('box');
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
oBox.style.backgroundColor = 'rgba('+ fn.rnd(0,255) +','+ fn.rnd(0,255) +','+ fn.rnd(0,255) +',0.5)';
},false);
},false);
rnd.js頁面代碼
export function rnd(m,n){
return parseInt(Math.random()*(m-n)+n);
}
style.css頁面代碼
html,body{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: aquamarine;
}
執行打包命令
$ webpack main.js main.bundle.js --module-bind 'css=style-load rogress --display-modules --display-reasons --watch --colors
打包完成后見上圖：有個打包后信息，例如哈希值、版本號、打包時間等。
下面就看下頁面展示效果吧：
