前端工程化&掌握Webpack極速配置技巧
我們都知道，現在屬于前端工程化時代，前端工程化對于我們前端開發來說，是非常重要的。 但是小莊覺得自己對于前端工程化 了解還 是不足的，還有很多需要學習的地方。
故這一節，小莊打算就來帶大家一起好好認識下前端工程化。
包括在這一節中，小莊將 詳細記錄一下， 其中一個前端構建工具的配置技巧，即 webpack極速配置技巧 。
前端工程化—概述
隨著前端開發功能要求不斷提高，業務邏輯日益復雜。傳統的刀耕火種的開發方式，已經不適合現代的開發要求， 前端工程化是指遵循一定的標準和規范，通過工具去提高開發效率，降低成本的一種手段 。
開發過程中的很多臟活累活，都應該交給自動化工具來完成。
工程：可以簡單理解為一個項目（例如一個網站，一個APP等）；
工程化：實現一個工程的具體流程、技術、工具、規范等。涉及到從工程立項開發到上線運行的整個過程；
前端工程化就是通過各種工具和技術，提升前端開發效率的過程。
主要解決的問題
前端工程化主要解決的問題如下：
重復的機械式工作：部署上線前，需要手動壓縮代碼和資源文件。
傳統語言或語法的弊端：要是用 ES6+ 和 CSS3 的新特性，兼容性有問題。使用 Less / Sass / PostCSS 增強 CSS 的編程性，但運行環境不支持。
代碼風格統一，質量保證：多人協同開發，無法硬性統一大家的代碼風格。
依賴后端服務接口支持：部分功能開發時，需要等待后端服務接口提前完成。
包含的工具和技術
前端工程化包含的工具和技術如下：
- 前端構建工具
- 例： webpack、 vit e、 Grunt、 Gulp、當然也包括各種腳手架工具。
- 自動化構建
- 模塊化打包
- 規范化標準
- 自動化測試
- 自動化部署
vite和webpack區別
我們都知道，各前端構建工具存在著不同的差異。 但是 這 里， 我們就先 著重對vite和webpack進行對比一下 ，其他前端構建工具小伙伴們 要 是有興趣的話，也可以自行進行對比哈 。
vite和webpack的具體對比如下：
可以看到 使用JS開發的工具通常需要很長的時間才能啟動開發服務器，且這個啟動時間與代碼量、代碼復雜度正相關。
即使使用HMR，文件修改后的效果也要幾秒鐘才能在瀏覽器中反應出來，代表如Webpack。 那么Vite是如何解決如Webpack這樣的構建工具一樣，在復雜、多模塊項目開發中啟動慢、HMR慢的問題呢 ？
我們詳細對比了開發環境中的Vite和Webpack，發現主要有如下不同：
Webpack | Vite |
先打包生成bundle，再啟動開發服務器 | 先啟動開發服務器，利用新一代瀏覽器的ESM能力，無需打包，直接請求所需模塊并實時編譯 |
HMR時需要把改動模塊及相關依賴全部編譯 | HMR時只需讓瀏覽器重新請求該模塊，同時利 用瀏覽器的緩存（源碼模塊協商緩存，依賴模塊 強緩存）來優化請求 |
內存高效利用 | - |
因此，針對開發環境中的啟動慢問題，Vite開發環境冷啟動無需打包，無需分析模塊之間的依賴，同時也無需在啟動開發服務器前進行編譯，啟動時還會使用esbuild來進行預構建。
而Webpack 啟動后會做一堆事情，經歷一條很長的編譯打包鏈條，從入口開始需要逐步經歷語法解析、依賴收集、代碼轉譯、打包合并、代碼優化，最終將高版本的、離散的源碼編譯打包成低版本、高兼容性的產物代碼，這可滿滿都是 CPU、IO 操作啊，在 Node 運行時下性能必然是有問題。
針對HMR慢，即使只有很小的改動，Webpack依然需要構建完整的模塊依賴圖，并根據依賴圖來進行轉換。而Vite利用了ESM和瀏覽器緩存技術，更新速度與項目復雜度無關?？梢钥吹剑鏢nowpack、Vite這類面相非打包的構建工具，在開發環境啟動時只需要啟動兩個Server，一個用于頁面加載，一個用于HMR的Websocket。當瀏覽器發出原生的ESM請求，Server收到請求只需要編譯當前文件后返回給瀏覽器，不需要管理依賴。
但同樣，vite也存在一些缺點，如下：
- 生態不及webpack，加載器、插件不夠豐富
- 生產環境esbuild構建對于css和代碼分割不夠友好
- 沒被大規模重度使用，會隱藏一些問題
所以，這里我們還是以webpack的配置講解為主。
webpack極速配置技巧
1、使用npm init生成package.json
2、安裝五大基礎套件，五大基礎套件如下：
- 安裝webpack三大件：
webpack、webpack-cli、webpack-dev-server
- 安裝處理js使用的loader，例如處理es6、es7、es8、裝飾器，使之變成瀏覽器可以認識的es5。
- 安裝處理css預編譯的loader，例如sass-loader。
sass-loader、node-loader、css-loader、style-loader
- 安裝處理模板的loader，例如：ejs-loader，處理的模版后綴是.tpl。
ejs-loader
- 安裝處理html的plugin，例如：html-webpack-plugin。
html-webpack-plugin
3、在webpack.config.js中進行項目運行配置
（1）如下為本示例項目的結構目錄：
（2）webpack.config.js的配置如下：
/*
以下為webpack的極速配置示例
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// mode分為development 和 production
mode: 'development',
entry: {
index: path.resolve(__dirname, './src/js/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
// 注意：[name]是一個變量, [name].js將對應entry中的index.js
filename: './js/[name].js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, './node_modules')
},
{
test: /\.css$/,
// 注意：webpack中的使用loader時，是倒序處理的，所以use中同樣需要倒序放置
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.tpl$/,
loader: 'ejs-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
// 1、打包后的文件名稱
filename: 'index.html',
// 2、要打包的html模版, 即index.html
template: path.resolve(__dirname, './src/index.html'),
/*
3、要在打包后的index.html中引入的js文件,
其中, 數組chunks中存放的是entry對象的key,
而這里是key值是index。
*/
chunks: ['index'],
/*
4、要在打包后的index.html中排除引入的js文件,
其中, 數組excludeChunks中存放的是entry對象的key,
而這里是key值是node_modules, 如果entry中的key值沒
有node_modules也沒關系，寫上也不會報錯。
*/
excludeChunks: ['node_modules']
})
],
devServer: {
open: true,
host: 'localhost',
port: 3300
}
};
4、在package.json中配置運行項目的命令
5、在終端使用npm run dev，看看效果：
