1、什么是Webpack

本質(zhì)上， webpack是一個現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器(module bundler) 。當(dāng)webpack處理應(yīng)用程序時， 它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph) ， 其中包含應(yīng)用程序需要的每個模塊， 然后將所有這些模塊打包成一個或多個bundle.

Webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具， 它可以將許多松散耦合的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分離，等到實際需要時再異步加載。通過 loader轉(zhuǎn)換， 任何形式的資源都可以當(dāng)做模塊， 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等；

伴隨著移動互聯(lián)網(wǎng)的大潮， 當(dāng)今越來越多的網(wǎng)站已經(jīng)從網(wǎng)頁模式進(jìn)化到了WebApp模式。它們運行在現(xiàn)代瀏覽器里， 使用HTML 5、CSS 3、ES 6等新的技術(shù)來開發(fā)豐富的功能， 網(wǎng)頁已經(jīng)不僅僅是完成瀏覽器的基本需求； WebApp通常是一個SPA(單頁面應(yīng)用) ， 每一個視圖通過異步的方式加載，這導(dǎo)致頁面初始化和使用過程中會加載越來越多的JS代碼，這給前端的開發(fā)流程和資源組織帶來了巨大挑戰(zhàn)。

前端開發(fā)和其他開發(fā)工作的主要區(qū)別，首先是前端基于多語言、多層次的編碼和組織工作，其次前端產(chǎn)品的交付是基于瀏覽器的，這些資源是通過增量加載的方 式運行到瀏覽器端，如何在開發(fā)環(huán)境組織好這些碎片化的代碼和資源，并且保證他們在瀏覽器端快速、優(yōu)雅的加載和更新，就需要一個模塊化系統(tǒng)，這個理想中的模 塊化系統(tǒng)是前端工程師多年來一直探索的難題。

2、模塊化的演進(jìn)

Script標(biāo)簽

	<script src = "module1.js"></script>
	<script src = "module2.js"></script>
	<script src = "module3.js"></script>

這是最原始的JavaScript文件加載方式，如果把每一個文件看做是一個模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在window對象中，不同模塊的調(diào)用都是一個作用域。

這種原始的加載方式暴露了一些顯而易見的弊端：

• 全局作用域下容易造成變量沖突
• 文件只能按照<script>的書寫順序進(jìn)行加載
• 開發(fā)人員必須主觀解決模塊和代碼庫的依賴關(guān)系
• 在大型項目中各種資源難以管理，長期積累的問題導(dǎo)致代碼庫混亂不堪

CommonsJS

服務(wù)器端的NodeJS遵循CommonsJS規(guī)范，該規(guī)范核心思想是允許模塊通過require方法來同步加載所需依賴的其它模塊，然后通過exports或module.exports來導(dǎo)出需要暴露的接口。

require("module");
require("../module.js");
export.doStuff = function(){};
module.exports = someValue;
1234

優(yōu)點：

• 服務(wù)器端模塊便于重用
• NPM中已經(jīng)有超過45萬個可以使用的模塊包
• 簡單易用

缺點：

• 同步的模塊加載方式不適合在瀏覽器環(huán)境中，同步意味著阻塞加載，瀏覽器資源是異步加載的
• 不能非阻塞的并行加載多個模塊

實現(xiàn)：

• 服務(wù)端的NodeJS
• Browserify，瀏覽器端的CommonsJS實現(xiàn)，可以使用NPM的模塊，但是編譯打包后的文件體積較大
• modules-webmake，類似Browserify，但不如Browserify靈活
• wreq，Browserify的前身

AMD

Asynchronous Module Definition規(guī)范其實主要一個主要接口define(id?,dependencies?,factory);它要在聲明模塊的時候指定所有的依 賴dependencies，并且還要當(dāng)做形參傳到factory中，對于依賴的模塊提前執(zhí)行。

define("module",["dep1","dep2"],functian(d1,d2){
	return someExportedValue;
});
require（["module","../file.js"],function(module，file){});
1234

優(yōu)點

• 適合在瀏覽器環(huán)境中異步加載模塊
• 可以并行加載多個模塊

缺點

• 提高了開發(fā)成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不暢
• 不符合通用的模塊化思維方式，是一種妥協(xié)的實現(xiàn)

實現(xiàn)

• RequireJS
• curl

CMD

Commons Module Definition規(guī)范和AMD很相似，盡保持簡單，并與CommonsJS和NodeJS的Modules規(guī)范保持了很大的兼容性。

define(function(require,exports,module){
	var $=require("jquery");
	var Spinning = require("./spinning");
	exports.doSomething = ...;
	module.exports=...;
});

優(yōu)點：

• 依賴就近，延遲執(zhí)行
• 可以很容易在NodeJS中運行缺點
• 依賴SPM打包，模塊的加載邏輯偏重

實現(xiàn)

• Sea.js
• coolie

ES6模塊

EcmaScript 6標(biāo)準(zhǔn)增加了JavaScript語言層面的模塊體系定義。ES 6模塊的設(shè)計思想， 是盡量靜態(tài)化， 使編譯時就能確定模塊的依賴關(guān)系， 以及輸入和輸出的變量。Commons JS和AMD模塊，都只能在運行時確定這些東西。

import "jquery"
export function doStuff(){}
module "localModule"{}

優(yōu)點

• 容易進(jìn)行靜態(tài)分析
• 面向未來的Ecma Script標(biāo)準(zhǔn)

缺點

• 原生瀏覽器端還沒有實現(xiàn)該標(biāo)準(zhǔn)
• 全新的命令，新版的Node JS才支持

實現(xiàn)

• Babel

大家期望的模塊  

系統(tǒng)可以兼容多種模塊風(fēng)格， 盡量可以利用已有的代碼， 不僅僅只是JavaScript模塊化， 還有CSS、圖片、字體等資源也需要模塊化。

3、安裝Webpack

WebPack是一款模塊加載器兼打包工具， 它能把各種資源， 如JS、JSX、ES 6、SASS、LESS、圖片等都作為模塊來處理和使用。

安裝：

npm install webpack -g
npm install webpack-cli -g

測試安裝成功

• webpack -v
• webpack-cli -v 

配置

創(chuàng)建 webpack.config.js配置文件

• entry：入口文件， 指定Web Pack用哪個文件作為項目的入口
• output：輸出， 指定WebPack把處理完成的文件放置到指定路徑
• module：模塊， 用于處理各種類型的文件
• plugins：插件， 如：熱更新、代碼重用等
• resolve：設(shè)置路徑指向
• watch：監(jiān)聽， 用于設(shè)置文件改動后直接打包

module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

直接運行webpack命令打包

4、使用webpack

1.創(chuàng)建項目

2.創(chuàng)建一個名為modules的目錄，用于放置JS模塊等資源文件

3.在modules下創(chuàng)建模塊文件，如hello.js，用于編寫JS模塊相關(guān)代碼

	//暴露一個方法：sayHi
	exports.sayHi = function(){
		document.write("<div>Hello Webpack</div>");
	}

在modules下創(chuàng)建一個名為main.js的入口文件，用于打包時設(shè)置entry屬性

//require 導(dǎo)入一個模塊，就可以調(diào)用這個模塊中的方法了
var hello = require("./hello");
hello.sayHi();

在項目目錄下創(chuàng)建webpack.config.js配置文件，使用webpack命令打包

module.exports = {
	entry:"./modules/main.js",
	output:{
		filename:"./js/bundle.js"
	}
 
}

在項目目錄下創(chuàng)建HTML頁面，如index.html，導(dǎo)入webpack打包后的JS文件

	<!doctype html>
	<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>狂神說Java</title>
		</head>
		<body>
			<script src="dist/js/bundle.js"></script>
		</body>
	</html>

1.在IDEA控制臺中直接執(zhí)行webpack；如果失敗的話，就使用管理員權(quán)限運行即可！

2.運行HTML看效果

說明

# 參數(shù)--watch 用于監(jiān)聽變化
webpack --watch

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

最新評論