寫在前面
最近學(xué)習(xí)了一些關(guān)于webpack的知識(shí)，在此做一些紀(jì)錄形娇。
作為前端開發(fā)者挠铲，我們以前在瀏覽器中運(yùn)行 JavaScript ，會(huì)引用一些腳本來存放每個(gè)功能砰嘁；此解決方案很難擴(kuò)展件炉，因?yàn)榧虞d太多腳本會(huì)導(dǎo)致網(wǎng)絡(luò)瓶頸勘究；亦或使用一個(gè)包含所有項(xiàng)目代碼的大型 .js 文件矮湘，但是這會(huì)導(dǎo)致作用域、文件大小口糕、可讀性和可維護(hù)性方面的問題缅阳。
后來，模塊化誕生……隨之而來的是一個(gè)新的時(shí)代景描，基于 node.js 的一系列解決方案也是孕育而生十办，各種功能、方法都是用模塊超棺，對(duì)于開發(fā)向族、維護(hù)也是極大的瓶頸突破和效率提升，但是新的問題隨之而來棠绘，各種模塊不是瀏覽器支持不夠友好件相，就是各依賴問題難以手動(dòng)解決或者構(gòu)建……而 webpack 此時(shí)也是破空而出，是用于現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具氧苍。最核心的功能則是解決模塊之間的依賴夜矗，把各個(gè)模塊按照特定的規(guī)則和順序組織在一起，最終合并為一個(gè)或多個(gè) .js 文件让虐。這個(gè)過程也被稱為 模塊打包 紊撕。
那么webpack到底神秘在何處？為何前端大框架都用它來配置赡突？為何近年面試頻頻被問对扶？上手難度幾何区赵？實(shí)際效果又如何？
本專題文章著手紀(jì)錄webpack實(shí)戰(zhàn)過程浪南，從零開始著手webpack的配置過程及優(yōu)化方案惧笛，例如模塊打包、資源輸入輸出逞泄、預(yù)處理器患整、樣式處理、代碼切割喷众、打包優(yōu)化各谚、開發(fā)環(huán)境調(diào)優(yōu) 等等篇章。
本篇紀(jì)錄關(guān)于webpack的簡(jiǎn)介以及環(huán)境配置到千、打包第一個(gè)應(yīng)用~
webpack簡(jiǎn)介
1. 什么是webpack
webpack是一個(gè)開源的Javascript模塊打包工具昌渤，最核心的功能是解決模塊之間的依賴，把各個(gè)模塊按照特定的規(guī)則和順序組織在一起憔四，最終合并為一個(gè)JS文件膀息。
2. 為什么選擇webpack
對(duì)比同類模塊打包工具，具備以下優(yōu)勢(shì)：
- 支持多種模塊標(biāo)準(zhǔn)了赵，如AMD潜支，CommonJS及ES6模塊等
- 具有完備的代碼分割功能，可以有效減小資源體積柿汛，提升首頁渲染速度
- 可以處理各類型資源冗酿，如css、png等
- 擁有龐大的社區(qū)支持
安裝
1. 環(huán)境
- 操作系統(tǒng)： 無要求
- 環(huán)境： Node.js
此處使用macOS或者windows為例络断。
2. Node.js安裝
打開node.js中文網(wǎng)（http://nodejs.cn/）裁替，點(diǎn)擊下載項(xiàng)安裝對(duì)應(yīng)系統(tǒng)的安裝包即可。
3. webpack安裝
新建一個(gè)目錄作為工程目錄
然后終端進(jìn)入或者通過命令行工具執(zhí)行npm初始化：
npm init-
依次輸入所提示的的基本信息貌笨，完成后得到一個(gè)
package.json文件
webpack安裝 執(zhí)行安裝webpack和webpack-cli
npm i webpack webpack-cli --save-dev執(zhí)行完成好就完成了安裝過程
打包第一個(gè)應(yīng)用
hello world
接著剛才的步驟繼續(xù)：
- 項(xiàng)目根目錄建入口文件： index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my first webpack app</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
- 項(xiàng)目根目錄新建文件夾
src弱判，存放兩個(gè)js文件：index.js和hello.js - index.js
// index.js
import hello from './hello.js';
document.write('my first webpack app <br/>');
hello();
- hello.js
// hello.js
export default function() {
document.write('hello world!');
}
- 命令行工具執(zhí)行打包命令：
npx webpack --entry=./src/index.js --output-filename=bundle.js --mode=development
- 執(zhí)行結(jié)果（和工程目錄）如下：
- 驗(yàn)證結(jié)果：瀏覽器打開
index.html，查看頁面結(jié)果：
結(jié)果
命令優(yōu)化
在上述打包命令中锥惋，我們使用npx webpack --entry=./src/index.js --output-filename=bundle.js --mode=development來執(zhí)行打包昌腰，但這一段命令冗長(zhǎng)而又耗時(shí)，搞不好還容易出錯(cuò)净刮。那么有沒有簡(jiǎn)潔一些的方法呢剥哑？
當(dāng)然有！
1. 使用 npm scripts 配置
配置
打開根目錄的配置文件淹父，編輯一條 scripts 命令：
{
"name": "w1",
"version": "1.0.0",
"description": "打包第一個(gè)應(yīng)用",
"main": "index.js",
"author": "zxm",
"license": "ISC",
// 添加命令
"scripts": {
"build": "webpack --entry=./src/index.js --output-filename=bundle.js --mode=development"
}
}
scripts 是 npm 提供的腳本命令功能株婴，在這里可以直接使用模塊所添加的指令。
驗(yàn)證
我們修改hello.js中的輸出：
// hello.js
export default function() {
document.write('hello scripts');
}
然后執(zhí)行打包命令：npm run build，觀察結(jié)果：
2. 使用配置文件配置
從上面命令可以看出困介，我們使用 scripts 命令一樣可以代替執(zhí)行 webpack 的打包命令大审，并且在命令行工具中使用則會(huì)更加簡(jiǎn)潔。
但是存在一個(gè)問題座哩，如果項(xiàng)目需要越來越多的配置徒扶，那么就需要往命令中塞入更多的參數(shù)，越來越多根穷，到后期姜骡，項(xiàng)目的維護(hù)成本則正比的增加許多。為了解決此問題屿良，可以將這些參數(shù)用對(duì)象的配置形式來統(tǒng)一存放到一個(gè)配置文件中圈澈，然后webpack每次打包都讀取該配置文件即可。
- 根目錄新建文件：
webpack.config.js尘惧，并配置如下代碼：
// webpack.config.js
module.exports = {
// 入口文件指定
entry: './src/index.js',
// 輸出資源配置
output: {
filename: 'bundle.js'
},
// 打包模式：develop-開發(fā)康栈，production-生產(chǎn)
mode: 'development'
}
- 修改
package.json文件的scripts > build配置：
{
......
// 修改后如下：
"scripts": {
"build": "webpack"
}
}
- 校驗(yàn)：修改
hello.js的輸出：
// hello.js
export default function() {
document.write(`this is webpack.config\'s result`);
}
- 執(zhí)行
npm run build，刷新瀏覽器喷橙，看結(jié)果：
至此啥么，webpack的初始化環(huán)境配置及基礎(chǔ)配置已經(jīng)完畢。但是我們現(xiàn)在遇到一個(gè)麻煩事：我們沒更改一些代碼贰逾，則需要重新打包才能去測(cè)試悬荣，才能看到結(jié)果，那么有沒有什么簡(jiǎn)潔的方案處理呢似踱？有隅熙！繼續(xù)操作~
3. 開發(fā)優(yōu)化——熱更新
webpack社區(qū)為我們提供了一個(gè)便捷的本地開發(fā)工具：webpack-dev-server，
安裝
執(zhí)行安裝命令：
npm i webpack-dev-server --save-dev
新增 npm scripts 命令
前面剛寫了一個(gè)scripts命令核芽，那么此時(shí)再添加一個(gè)dev來配置。編輯根目錄的package.json文件：
{
......
"scripts": {
"build": "webpack --entry=./src/index.js --output-filename=bundle.js --mode=development",
"dev": "webpack-dev-server"
}
}
還沒結(jié)束酵熙，仍需在webpack中配置一下：
webpack.config.js添加dev-server配置
module.exports = {
......
// 新增： dev-server配置
devServer: {
publicPath: '/dist'
}
}
啟動(dòng)本地服務(wù)
執(zhí)行命令npm run dev
可以看到轧简，在左側(cè)代碼塊中修改內(nèi)容后，只需要保存即可匾二，右邊瀏覽器則自動(dòng)刷新了~~
這個(gè)功能可以脫離dist文件哮独，也就是沒有通過實(shí)際的打包，為什么會(huì)這樣呢察藐？
因?yàn)?code>webpack-dev-serve其實(shí)不會(huì)寫入實(shí)際的bundle.js文件皮璧，而是將打包結(jié)果運(yùn)行于內(nèi)存之中，然后每次webpack-dev-serve接收到請(qǐng)求的時(shí)候都將此時(shí)內(nèi)存中的打包結(jié)果返回給瀏覽器端即可分飞。
備注：如果npm run dev啟動(dòng)失敗悴务，有可能是webpack webpack-cli webpack-dev-server 的班班之間存在不兼容現(xiàn)象，將這三個(gè)卸載后(用 npm uninstall 卸載)，同時(shí)將這三個(gè)安裝一下即可：npm install webpack webpack-cli webpack-dev-serve
本篇代碼demo存于公眾號(hào)【流眸】讯檐，歡迎掃碼關(guān)注公眾號(hào)羡疗，可在公眾號(hào)下回復(fù)【2073】獲取
小結(jié)
本篇文章中，對(duì)webpack有了一個(gè)基本的介紹： 處理模塊之間的依賴并將其打包然后進(jìn)行了webpack環(huán)境的安裝和配置：環(huán)境别洪、nodeJs叨恨、webpack及webpack-cli等。
之后挖垛，開始了第一個(gè)案例： hello world痒钝，然后通過webpack命令進(jìn)行打包，打包到./dist/bundle.js痢毒。
最后進(jìn)行了一波優(yōu)化午乓，由于直接輸入命令過于繁瑣，因此借助 npm 腳本或者 webpack.config 來維護(hù) webpack 命令闸准。此時(shí)由于頻繁的打包也不符合開發(fā)條件益愈，因此使用本地服務(wù) webpack-dev-server 來啟用一個(gè)可熱加載的本地服務(wù)來處理打包資源和靜態(tài)文件的請(qǐng)求。
下一篇將會(huì)紀(jì)錄如何編寫和使用模塊夷家，以及模塊打包蒸其。敬請(qǐng)期待~
