什么是webpack收奔？
webpack官網(wǎng)上這樣介紹webpack——本質(zhì)上掌呜，webpack是一個(gè)用于現(xiàn)代JavaScript應(yīng)用程序的 靜態(tài)模塊打包工具。當(dāng) webpack 處理應(yīng)用程序時(shí)坪哄，它會(huì)在內(nèi)部構(gòu)建一個(gè)依賴圖(如下圖所示)质蕉，此依賴圖對(duì)應(yīng)映射到項(xiàng)目所需的每個(gè)模塊，并生成一個(gè)或多個(gè)bundle翩肌。
我們可以這樣簡(jiǎn)單概括下：webpack是一個(gè)打包模塊化Javascript的工具模暗，他會(huì)從入口模塊出發(fā)，識(shí)別出代碼中的模塊化導(dǎo)入語(yǔ)句摧阅，遞歸的找出入口文件的所有依賴，將入口和其所有依賴打包到一個(gè)單獨(dú)的文件中绷蹲，他是工程化棒卷，自動(dòng)化思想在前端開發(fā)中的提現(xiàn)顾孽。
webpack初體驗(yàn)
1.安裝node環(huán)境
webpack依賴于node環(huán)境，所以安裝webpack前請(qǐng)確保你已安裝node環(huán)境比规，推薦安裝node的最新版本若厚，可以提升webpack的打包速度。
2.安裝webpack
webpack可以局部安裝蜒什，也可以全局安裝测秸。全局安裝webpack會(huì)將你項(xiàng)目中的webpack鎖定到指定版本，造成不同項(xiàng)目因?yàn)橐蕾嚥煌姹径鴮?dǎo)致沖突灾常，構(gòu)建失敗霎冯，所以我們只介紹局部安裝的方式。
- 初始化npm配置文件
npm init -y - 安裝核心庫(kù)
npm install --save-dev webpack - 安裝命令行工具
npm install --save-dev webpack-cli
3.啟動(dòng)webpack
接下來(lái)我們編寫一段代碼來(lái)看看webpack會(huì)怎樣運(yùn)行钞瀑。
- 在工程項(xiàng)目中新建src文件夾沈撞，在src目錄下新增index.js和hello.js
hello.js
export function helloWebpack() {
return 'hello Webpack'
}
index.js
import { helloWebpack } from './hello';
document.write(helloWebpack())
- 在命令行執(zhí)行命令
./node_modules/.bin/webpack，執(zhí)行完成后命令行輸出為：
查看工程項(xiàng)目雕什，可以看到webpack命令執(zhí)行后輸出了文件夾dist缠俺，文件夾下有一個(gè)main.js文件，內(nèi)容為：
(()=>{"use strict";document.write("hello Webpack")})();贷岸。main.js就是webpack根據(jù)我們代碼的入口和模塊依賴打包出來(lái)的代碼壹士。
- 在dist文件夾下新建index.html文件，引入main.js,查看運(yùn)行效果
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello wepack</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
在瀏覽器打開index.html,瀏覽器視口顯示hello Webpack
至此我們一個(gè)webpack初體驗(yàn)就完成了偿警。正如官網(wǎng)所說(shuō)躏救，webpack 開箱即用，可以無(wú)需使用任何配置文件户敬。webpack 會(huì)假定項(xiàng)目的入口起點(diǎn)為 src/index.js落剪，然后會(huì)在 dist/main.js 輸出結(jié)果。并且在生產(chǎn)環(huán)境開啟壓縮和優(yōu)化尿庐。
webpack基礎(chǔ)配置結(jié)構(gòu)
在上面的webpack初體驗(yàn)中忠怖，我們體驗(yàn)到了webpack開箱即用的快樂，然而通常我們的項(xiàng)目中還需要繼續(xù)擴(kuò)展webpack的能力抄瑟，從而達(dá)到定制化的項(xiàng)目需求凡泣。webpack也為我們提供了默認(rèn)的配置文件，我們可以在項(xiàng)目根目錄下創(chuàng)建一個(gè)webpack.config.js文件皮假，然后再執(zhí)行webpack命令時(shí)鞋拟，webpack會(huì)自動(dòng)使用它。
webpack.config.js配置基礎(chǔ)結(jié)構(gòu)如下：
module.exports = {
entry: "./src/index.js", // 打包入口文件
output: "./dist", //輸出目錄
mode: "production", // 打包環(huán)境
module: {
rules: [
//loader模塊處理
]
},
plugins: [] //插件配置
};
- entry：指定webpack打包入口文件
Webpack執(zhí)行構(gòu)建的第一步將從 entry 開始惹资，可抽象理解成輸入
//單入口 SPA贺纲，本質(zhì)是個(gè)字符串
entry:{
main: './src/index.js'
}
==相當(dāng)于簡(jiǎn)寫=== entry:"./src/index.js"
//多入口 entry是個(gè)對(duì)象
entry:{
index:"./src/index.js",
login:"./src/login.js"
}
2.output: 打包轉(zhuǎn)換后的文件輸出到磁盤位置
在 Webpack經(jīng)過(guò)一系列處理并得出最終想要的代碼后輸出結(jié)果。
output: {
filename: "bundle.js",//輸出文件的名稱
path: path.resolve(__dirname, "dist")//輸出文件到磁盤的目錄褪测，必須是絕對(duì)路徑
},
//多入口的處理
output: {
filename: "[name][chunkhash:8].js",//利用占位符猴誊，文件名稱不要重復(fù)
path: path.resolve(__dirname, "dist")//輸出文件到磁盤的目錄潦刃，必須是絕對(duì)路徑
},
3.mode：用來(lái)指定當(dāng)前的構(gòu)建環(huán)境
有三個(gè)可選項(xiàng)：production， development懈叹， none乖杠。默認(rèn)是production。設(shè)置mode可以自動(dòng)觸發(fā)webpack內(nèi)置的函數(shù)澄成，達(dá)到優(yōu)化的效果胧洒。
mode: 'development'
//也可以從CLI參數(shù)中傳遞
webpack --mode=development
| 選項(xiàng) | 描述 |
|---|---|
| development | 會(huì)將 DefinePlugin 中 process.env.NODE_ENV 的值設(shè)置為 development. 為模塊和 chunk 啟用有效的名。 |
| production | 會(huì)將 DefinePlugin 中 process.env.NODE_ENV 的值設(shè)置為 production墨状。為模塊和 chunk 啟用確定性的混淆名稱卫漫，F(xiàn)lagDependencyUsagePlugin，F(xiàn)lagIncludedChunksPlugin歉胶，ModuleConcatenationPlugin汛兜，NoEmitOnErrorsPlugin 和 TerserPlugin 。 |
| none | 不默認(rèn)使用任何優(yōu)化選項(xiàng) |
- loader： 模塊解析通今，或者也叫模塊解析器粥谬。
用于把模塊原內(nèi)容按照要求轉(zhuǎn)換為新內(nèi)容。webpack默認(rèn)只知道如何處理js和json模塊辫塌，那么其他格式的模塊處理就需要loader來(lái)做漏策。一個(gè)loader只做一件事情
常見的loader如下：
style-loader //會(huì)把css-loader生成的內(nèi)容，以style掛載到?面的heade部分
css-loader //分析css模塊之間的關(guān)系臼氨，并合成一個(gè)css
less-loader // 將less轉(zhuǎn)換為css
sass-loader // 將sass轉(zhuǎn)換為css
ts-loader //將Ts轉(zhuǎn)換成js
babel-loader //轉(zhuǎn)換ES6掺喻、7等js新特性語(yǔ)法
file-loader //處理圖片子圖
eslint-loader //eslint
...
- module: 模塊，在 Webpack里一切皆模塊储矩，一個(gè)模塊對(duì)應(yīng)著一個(gè)文件感耙。Webpack會(huì)從配置的 Entry 開始遞歸找 出所有依賴的模塊。當(dāng)webpack處理到不認(rèn)識(shí)的模塊時(shí)持隧，需要在webpack中的module處進(jìn)行配置即硼，當(dāng)檢測(cè)到是什么格式的 模塊，使用什么loader來(lái)處理屡拨。
module:{
rules:[
{
test:/\.xxx$/, //指定匹配規(guī)則
use:{
loader: 'xxx-load' //指定使用的loader
}
}
]
}
6.plugins: webpack的擴(kuò)展插件
- plugins作用于webpack打包整個(gè)過(guò)程
- webpack的打包過(guò)程是有(生命周期概念)鉤子只酥。
plugin 可以在webpack運(yùn)行到某個(gè)階段的時(shí)候，幫你做一些事情呀狼，類似于生命周期的概念 擴(kuò)展插件裂允，在 Webpack 構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯來(lái)改變構(gòu)建結(jié)果或做你想要的事情。作用于整個(gè)構(gòu)建過(guò)程哥艇。
總結(jié)
在webpack系列專欄《帶你從零構(gòu)建webpack知識(shí)體系》的第一片中介紹了webpack的安裝及基礎(chǔ)配置绝编，下節(jié)我們將一起通過(guò)實(shí)踐這些配置，來(lái)進(jìn)一步學(xué)習(xí)webpack。
webpack專欄相關(guān)代碼地址：https://github.com/wanganni1014/zl-webpack.git 切換到對(duì)應(yīng)分支即可十饥。
