初學(xué)者應(yīng)該看的 Webpack 完整指南（2020）
我們應(yīng)該學(xué)習(xí) webpack 嗎 ？
如今，CLI工具（如create-react-app或Vue -cli）已經(jīng)為我們抽象了大部分配置，并提供了合理的默認設(shè)置。
即使那樣，了解幕后工作原理還是有好處的，因為我們遲早需要對默認值進行一些調(diào)整。
在本文中中，我們會知道 webpack可以做什么，以及如何配置它以滿足我們的日常需求。
什么是 webpack？
作為前端開發(fā)人員，我們應(yīng)該熟悉 module 概念。你可能聽說過 AMD模塊，UMD，Common JS還有ES模塊。
webpack是一個模塊綁定器，它對模塊有一個更廣泛的定義，對于webpack來說，模塊是：
Common JS modules AMD modules CSS import Images url ES modules
webpack 還可以從這些模塊中獲取依賴關(guān)系。
webpack 的最終目標(biāo)是將所有這些不同的源和模塊類型統(tǒng)一起來，從而將所有內(nèi)容導(dǎo)入JavaScript代碼，并最生成可以運行的代碼。
entry
Webpack的 **entry(入口點)**是收集前端項目的所有依賴項的起點。實際上，這是一個簡單的 JavaScript 文件。
這些依賴關(guān)系形成一個依賴關(guān)系圖。
Webpack 的默認入口點（從版本4開始）是src/index.js，它是可配置的。webpack 可以有多個入口點。
Output
output是生成的JavaScript和靜態(tài)文件的地方。
Loaders
Loaders 是第三方擴展程序，可幫助webpack處理各種文件擴展名。例如，CSS，圖像或txt文件。
Loaders的目標(biāo)是在模塊中轉(zhuǎn)換文件（JavaScript以外的文件）。文件成為模塊后，webpack可以將其用作項目中的依賴項。
Plugins
插件是第三方擴展，可以更改webpack的工作方式。例如，有一些用于提取HTML，CSS或設(shè)置環(huán)境變量的插件。
Mode
webpack 有兩種操作模式：開發(fā)(development)和生產(chǎn)(production)。它們之間的主要區(qū)別是生產(chǎn)模式自動生成一些優(yōu)化后的代碼。
Code splitting
代碼拆分或延遲加載是一種避免生成較大包的優(yōu)化技術(shù)。
通過代碼拆分，開發(fā)人員可以決定僅在響應(yīng)某些用戶交互時加載整個JavaScript塊，比如單擊或路由更改(或其他條件)。
被拆分的一段代碼稱為 chunk。
Webpack入門
開始使用webpack時，先創(chuàng)建一個新文件夾，然后進入該文件中，初始化一個NPM項目，如下所示：
mkdir?webpack-tutorial?&&?cd?$_
npm?init?-y
接著安裝 webpack，webpack-cli和 webpack-dev-server：
npm?i?webpack?webpack-cli?webpack-dev-server?--save-dev
要運行 webpack，只需要在 package.json 配置如下命令即可：
??"scripts":?{
????"dev":?"webpack?--mode?development"
??},
通過這個腳本，我們指導(dǎo)webpack在開發(fā)模式下工作，方便在本地工作。
Webpack 的第一步
在開發(fā)模式下運行 webpack:
npm?run?dev
運行完后會看到如下錯誤：
ERROR?in?Entry?module?not?found:?Error:?Can't?resolve?'./src'
webpack 在這里尋找默認入口點src/index.js，所以我們需要手動創(chuàng)建一下，并輸入一些內(nèi)容:
mkdir?src
echo?'console.log("Hello?webpack!")'?>?src/index.js
現(xiàn)在再次運行npm run dev，錯誤就沒有了。運行的結(jié)果生成了一個名為dist/的新文件夾，其中包含一個名為main.js的 JS 文件：
dist
└──?main.js
這是我們的第一個webpack包，也稱為output。
配置 Webpack
對于簡單的任務(wù)，webpack無需配置即可工作，但是很快我們就會遇到問題，一些文件如果沒有指定的 loader 是沒法打包的。所以，我們需要對 webpack進行配置，對于 webpack 的配置是在 webpack.config.js 進行的，所以我們需要創(chuàng)建該文件：
touch?webpack.config.js
Webpack 用 JavaScript 編寫，并在無頭 JS 環(huán)境（例如Node.js）上運行。在此文件中，至少需要一個module.exports，這是的 Common JS 導(dǎo)出方式：
module.exports?=?{
??//
};
在webpack.config.js中，我們可以通過添加或修改來改變webpack的行為方式
entry point output loaders plugins code splitting
例如，要更改入口路徑，我們可以這樣做
const?path?=?require("path");
module.exports?=?{
??entry:?{?index:?path.resolve(__dirname,?"source",?"index.js")?}
};
現(xiàn)在，webpack 將在source/index.js中查找要加載的第一個文件。要更改包的輸出路徑，我們可以這樣做：
const?path?=?require("path");
module.exports?=?{
??output:?{
????path:?path.resolve(__dirname,?"build")
??}
}
這樣，webpack將把最終生成包放在build中，而不是dist.(為了簡單起見，在本文中，我們使用默認配置)。
打包 HTML
沒有HTML頁面的Web應(yīng)用程序幾乎沒有用。要在webpack中使用 HTML，我們需要安裝一個插件html-webpack-plugin：
npm?i?html-webpack-plugin?--save-dev
一旦插件安裝好，我們就可以對其進行配置:
const?HtmlWebpackPlugin?=?require("html-webpack-plugin");
const?path?=?require("path");
module.exports?=?{
??plugins:?[
????new?HtmlWebpackPlugin({
??????template:?path.resolve(__dirname,?"src",?"index.html")
????})
??]
};
這里的意思是讓 webpack，從 src/index.html 加載 HTML 模板。
html-webpack-plugin的最終目標(biāo)有兩個：
加載 html 文件
它將
bundle注入到同一個文件中
接著，我們需要在 src/index.html 中創(chuàng)建一個簡單的 HTML 文件：
"en">
????"UTF-8">
????Webpack?tutorial