国产麻豆一区二区,丰满老熟女一级AA片色欲,猛操人妻,黄色在线观看网站,国产精品国产伦子伦露看,国产精品无码免费视频,97www,久久夜色精品国产亚洲

這是重新學(xué)習(xí)webpack的第一篇文章，之前我也寫(xiě)過(guò)一篇關(guān)于webpack的文章：目前最流行的前端打包工具-webpack。

問(wèn)題是過(guò)去快半年了，我已經(jīng)將webpack忘得差不多，回頭一看那篇文章完全是一頭霧水，也沒(méi)有辦法，那個(gè)時(shí)候我才剛剛開(kāi)始寫(xiě)前端方面的博客，對(duì)于知識(shí)梳理、文字表達(dá)都有一些欠缺，啪啪啪一下扔出來(lái)幾千字，全是重點(diǎn)，沒(méi)有任何過(guò)渡性的語(yǔ)言，看個(gè)一會(huì)就沒(méi)什么興趣。

綜上所述，本次決定給webpack寫(xiě)一個(gè)比較詳細(xì)的系列文章，目的是如果我半年后又忘記了webpack的具體內(nèi)容，再來(lái)翻閱文章，不會(huì)像這次一樣一頭霧水。

什么情況適合學(xué)習(xí)webpack？

答：已經(jīng)對(duì)前端主流框架（Vue、React、Angular等）有一定認(rèn)識(shí)，并且想要進(jìn)一步學(xué)習(xí)框架相關(guān)的知識(shí)，比如Vue框架，是如何將.vue編譯成為js文件并且將虛擬DOM渲染到界面上，.scss文件，是如何自動(dòng)調(diào)用sass編譯器將它編譯成.css文件，讓瀏覽器能夠正確識(shí)別，其實(shí)這些都是資源構(gòu)建工具所干的事。

1. 簡(jiǎn)介

webpack 是一種前端資源構(gòu)建工具，一個(gè)靜態(tài)模塊打包器(module bundler)。

首先我們需要明白一點(diǎn)的就是，瀏覽器只認(rèn)識(shí)HTML、CSS、JavaScript這一類的文件，至于什么Sass、Less、jsx、ts等一系列的文件瀏覽器都不認(rèn)識(shí)，如果你需要讓瀏覽器能夠正確識(shí)別這些文件，你就需要使用工具將Sass、Less等文件轉(zhuǎn)為CSS，而TypeScript語(yǔ)法轉(zhuǎn)換為JavaScript語(yǔ)法。

如果你不使用構(gòu)建工具，那么你就必須手動(dòng)將這些文件進(jìn)行轉(zhuǎn)換，可能一個(gè)文件中有好多個(gè).scss、.ts文件，你都需要一個(gè)一個(gè)的去轉(zhuǎn)，這樣不光效率低不說(shuō)，還很容易出錯(cuò)。

資源構(gòu)建工具的出現(xiàn)就是為了解決這一痛點(diǎn)，只要你配置好構(gòu)建工具，它就會(huì)自動(dòng)的將瀏覽器無(wú)法識(shí)別的文件轉(zhuǎn)換為瀏覽器能夠識(shí)別的文件，瀏覽器無(wú)法識(shí)別的語(yǔ)言轉(zhuǎn)換為瀏覽器能夠識(shí)別的語(yǔ)言。

靜態(tài)模塊打包器即webpack會(huì)找到你指定的入口文件，通過(guò)入口文件將你引入的模塊進(jìn)行打包，如果沒(méi)有在項(xiàng)目中引入的模塊則不會(huì)打包進(jìn)最終的項(xiàng)目，這大大降低了代碼的體積。

你可能想問(wèn)：為什么我用Vue、React這一類的框架也沒(méi)有配置過(guò)什么資源構(gòu)建工具呀，不是照樣可以寫(xiě)Sass、TypeScript嗎？

答：其實(shí)現(xiàn)在比較流行的前端框架，它的資源構(gòu)建工具都是由發(fā)布方已經(jīng)幫你配置好了，你直接拿來(lái)用就行。

你可能又想問(wèn)：既然人家已經(jīng)配置好了，為什么我還要學(xué)？

答：大部分情況我們都不需要再手動(dòng)進(jìn)行配置構(gòu)建工具，但是如果你想要對(duì)項(xiàng)目進(jìn)行優(yōu)化時(shí)，你就必須了解甚至懂得構(gòu)建工具相關(guān)的知識(shí)，你才能夠完成項(xiàng)目?jī)?yōu)化的任務(wù)，而且有一部分面試官也喜歡考察這方面的問(wèn)題。更重要的是，打包工具是前端架構(gòu)繞不開(kāi)的一環(huán)，如果你要寫(xiě)一個(gè)框架，肯定要學(xué)習(xí)構(gòu)建工具，當(dāng)然你也可以自己寫(xiě)一個(gè)構(gòu)建工具（比如尤雨溪的vite）。所以學(xué)習(xí)webpack也是前端進(jìn)階的一環(huán)。

相信看到這里，你已經(jīng)對(duì)webpack有一定的了解，知道webpack到底是做什么的。

2. 五個(gè)核心概念

其實(shí)webpack僅有下面5個(gè)比較核心的概念，掌握了這5個(gè)概念，你就能夠很輕松的配置webpack。

2.1 Entry

入口(Entry)指示?webpack?以哪個(gè)文件為入口起點(diǎn)開(kāi)始打包，分析構(gòu)建內(nèi)部依賴圖。

2.2 Output

輸出(Output)指示?webpack?打包后的資源?bundles?輸出到哪里去，以及如何命名。

2.3 Loader

Loader?讓?webpack?能夠去處理那些非?JavaScript?文件 (webpack自身只理解JavaScript)。

2.4 Plugins

插件(Plugins)可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量等。

2.5 Mode

模式(Mode)指示?webpack?使用相應(yīng)模式的配置。

在這5項(xiàng)內(nèi)容中，我們需要著重學(xué)習(xí)的就是Loader、Plugins?？梢哉f(shuō)對(duì)一個(gè)項(xiàng)目的功能拓展來(lái)說(shuō)，這兩項(xiàng)內(nèi)容起著決定性的作用，在一定的情況下，我們甚至還需要手寫(xiě)Loader和Plugins。

不過(guò)如果不是自己研發(fā)框架或者學(xué)習(xí)webpack的時(shí)候，很少會(huì)去寫(xiě)這些，因?yàn)槭忻嫔弦呀?jīng)有了非常多的成熟的開(kāi)源Loader和Plugins，我們需要的只是拿過(guò)來(lái)用就可以了，一些主流的框架甚至你連webpack都不用配置，官方已經(jīng)幫你寫(xiě)好了配置文件。

根據(jù)我的工作經(jīng)驗(yàn)來(lái)看，在實(shí)際的項(xiàng)目中，可能對(duì)于webpack多多少少會(huì)有一些手動(dòng)配置，比如配置開(kāi)發(fā)環(huán)境下啟動(dòng)的端口號(hào)，比如通過(guò)webpack解決跨域，比如要讓一個(gè).scss文件在全項(xiàng)目中不用引入就可以使用，再比如.svg文件的一些簡(jiǎn)便引入方式，都需要手動(dòng)去配置webpack。

但是這些配置都不難，只要網(wǎng)上隨便看兩篇文章，就算不知道webpack的原理，都能比較順利的完成這方面的配置。

3. 體驗(yàn)

那么怎么創(chuàng)建一個(gè)webpack項(xiàng)目呢？

3.1 創(chuàng)建項(xiàng)目

先新建一個(gè)文件夾，進(jìn)入到文件夾中，創(chuàng)建一個(gè)Node項(xiàng)目。

npm init -y

可以看到出現(xiàn)了package.json文件，這就說(shuō)明一個(gè)Node項(xiàng)目創(chuàng)建完成。

3.2 引入webpack

npm install webpack webpack-cli --save-dev

有一定經(jīng)驗(yàn)的同學(xué)一定知道上面的代碼是將webpack設(shè)置為開(kāi)發(fā)依賴，因?yàn)樯a(chǎn)環(huán)境是不需要webpack的，只需要webpack打包后的文件。

新建一個(gè)main.js文件。當(dāng)然這里文件名隨意取就好了，該文件就是整個(gè)項(xiàng)目的入口文件，即Entry。

隨意在main.js文件中寫(xiě)上下面的代碼。

function add(x, y) {
return x + y;
}

console.log(add(1, 2));

3.3 打包

在終端中運(yùn)行：

webpack ./main.js -o ./build/ --mode=development

可以看到項(xiàng)目下多了一個(gè)build文件夾，點(diǎn)擊去發(fā)現(xiàn)還有一個(gè)main.js文件，該文件就是你打包后的main.js文件。

到這里，你就可以使用webpack進(jìn)行打包了~

語(yǔ)句解釋

上面運(yùn)行的語(yǔ)句webpack后面的./main.js代表入口文件。

-o代表Output，而./build/代表將打包后的資源輸出到build文件夾中，--mode=development則代表打包模式為開(kāi)發(fā)模式。

3.1 Mode

打包模式：

development：開(kāi)發(fā)模式，代碼不會(huì)經(jīng)過(guò)壓縮。
production：生產(chǎn)模式，代碼會(huì)經(jīng)過(guò)壓縮。
none：不使用任何默認(rèn)優(yōu)化選項(xiàng)

那么development、production兩種模式有什么區(qū)別呢，我們可以先看一下上面的代碼經(jīng)過(guò)開(kāi)發(fā)模式打包的最終輸出結(jié)果：

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/*!*****************!*\
  !*** ./main.js ***!
  \*****************/
eval("function add(x, y) {\n  return x + y;\n}\n\nconsole.log(add(1, 2));\n\n\n//# sourceURL=webpack://webpack-cli/./main.js?");
/******/ })()
;

那么我們?cè)儆蒙a(chǎn)模式打包一次：

webpack ./main.js -o ./build/ --mode=production

打包結(jié)果：

console.log(3);

額…其實(shí)得到這個(gè)結(jié)果我還是非常意外的，因?yàn)槲抑纖ebpack5升級(jí)了搖樹(shù)（Tree Shaking，即把項(xiàng)目中無(wú)用的代碼去除掉）。但是沒(méi)有想到搖樹(shù)已經(jīng)變得如此智能。

好吧，更好的Tree Shaking也是webpack5主打的功能之一。

4. 最后

到目前為止，相信你對(duì)webpack已經(jīng)有一定的了解，知道webpack是一種前端資源構(gòu)建工具，一個(gè)靜態(tài)模塊打包器，已經(jīng)可以使用webpack進(jìn)行簡(jiǎn)單的js文件打包，注意，如果要使用webpack打包c(diǎn)ss、圖片、HTML文件，還需要配置之后需要重點(diǎn)講解的Loader和Plugins。

前端最常用的打包工具webpack(一)-初識(shí)篇