github官網(wǎng)褐啡、英文文檔罩锐、中文文檔
一奉狈、簡單介紹
給JavaScript準(zhǔn)備的一個(gè)打包工具，有個(gè)特性代碼分割涩惑，它允許按需加載應(yīng)用程序的部分仁期。還有l(wèi)oader的概念，通過相應(yīng)的Loader來處理相關(guān)的文件竭恬。所有文件都可看成是一個(gè)模塊跛蛋。
二、命令行中使用
ps:我使用的git命令行工具痊硕。
1赊级、npm init初始化項(xiàng)目生成一個(gè)pack.json文件
2、安裝webpack npm install webpack --save-dev會生成一個(gè)node_modules文件夾
3岔绸、 本節(jié)常用的命令
1) webpack main.js mian.bundle.js
說明讓webpack執(zhí)行打包命令main.js是要進(jìn)行打包的文件名稱理逊，mian.bundle.js是打包后文件的名稱。
2) --module-bind
說明給制定類型文件設(shè)置制定的loader進(jìn)行解析盒揉。
3) --progress
查看打包進(jìn)程
4) --display-moudles
查看打包的模塊
5) --display-reasons
查看打包該模塊的原因
6) --watch
監(jiān)聽改變后可自動進(jìn)行打包
選項(xiàng)：
--help, -h 顯示幫助信息 [布爾]
--version, -v 顯示版本號 [布爾]
--json, -j Prints the result as JSON.
三晋被、第一個(gè)實(shí)例
項(xiàng)目需求：頁面中有個(gè)id為box的元素水平居中顯示，點(diǎn)擊“走一個(gè)按鈕”隨機(jī)改變box的背景色刚盈。
**1羡洛、 **目錄結(jié)構(gòu)
|--webpack_170630
---index.html => 主頁面
---main.js => 主要的js文件
---rnd.js => 生成隨機(jī)數(shù)的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="走一個(gè)" />
</div>
<script src="main.bundle.js"></script>
</body>
</html>
main.js頁面代碼
var fn = require('./rnd.js');//此處引入用的require
//require('style-loader!css-loader!./style.css');//也可以在引入文件的時(shí)候進(jìn)行規(guī)定指定的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;
}
執(zhí)行打包命令
$ webpack main.js main.bundle.js --module-bind 'css=style-load rogress --display-modules --display-reasons --watch --colors
打包完成后見上圖：有個(gè)打包后信息藕漱，例如哈希值欲侮、版本號、打包時(shí)間等谴分。
下面就看下頁面展示效果吧：
