前端工程化&掌握Webpack極速配置技巧

作者：小莊同學(xué) 2022-07-06 11:20:16

前端工程化是指遵循一定的標(biāo)準(zhǔn)和規(guī)范，通過工具去提高開發(fā)效率，降低成本的一種手段。

我們都知道，現(xiàn)在屬于前端工程化時代，前端工程化對于我們前端開發(fā)來說，是非常重要的。但是小莊覺得自己對于前端工程化了解還是不足的，還有很多需要學(xué)習(xí)的地方。

故這一節(jié)，小莊打算就來帶大家一起好好認(rèn)識下前端工程化。

包括在這一節(jié)中，小莊將詳細(xì)記錄一下，其中一個前端構(gòu)建工具的配置技巧，即 webpack極速配置技巧。

前端工程化—概述

隨著前端開發(fā)功能要求不斷提高，業(yè)務(wù)邏輯日益復(fù)雜。傳統(tǒng)的刀耕火種的開發(fā)方式，已經(jīng)不適合現(xiàn)代的開發(fā)要求，前端工程化是指遵循一定的標(biāo)準(zhǔn)和規(guī)范，通過工具去提高開發(fā)效率，降低成本的一種手段。

開發(fā)過程中的很多臟活累活，都應(yīng)該交給自動化工具來完成。

工程：可以簡單理解為一個項(xiàng)目（例如一個網(wǎng)站，一個APP等）；

工程化：實(shí)現(xiàn)一個工程的具體流程、技術(shù)、工具、規(guī)范等。涉及到從工程立項(xiàng)開發(fā)到上線運(yùn)行的整個過程；

前端工程化就是通過各種工具和技術(shù)，提升前端開發(fā)效率的過程。

主要解決的問題

前端工程化主要解決的問題如下：

重復(fù)的機(jī)械式工作：部署上線前，需要手動壓縮代碼和資源文件。

傳統(tǒng)語言或語法的弊端：要是用 ES6+ 和 CSS3 的新特性，兼容性有問題。使用 Less / Sass / PostCSS 增強(qiáng) CSS 的編程性，但運(yùn)行環(huán)境不支持。

代碼風(fēng)格統(tǒng)一，質(zhì)量保證：多人協(xié)同開發(fā)，無法硬性統(tǒng)一大家的代碼風(fēng)格。

依賴后端服務(wù)接口支持：部分功能開發(fā)時，需要等待后端服務(wù)接口提前完成。

包含的工具和技術(shù)

前端工程化包含的工具和技術(shù)如下：

前端構(gòu)建工具

例： webpack、 vit e、 Grunt、 Gulp、當(dāng)然也包括各種腳手架工具。

自動化構(gòu)建
模塊化打包
規(guī)范化標(biāo)準(zhǔn)
自動化測試
自動化部署

vite和webpack區(qū)別

我們都知道，各前端構(gòu)建工具存在著不同的差異。但是這里，我們就先著重對vite和webpack進(jìn)行對比一下，其他前端構(gòu)建工具小伙伴們要是有興趣的話，也可以自行進(jìn)行對比哈。

vite和webpack的具體對比如下：

可以看到使用JS開發(fā)的工具通常需要很長的時間才能啟動開發(fā)服務(wù)器，且這個啟動時間與代碼量、代碼復(fù)雜度正相關(guān)。

即使使用HMR，文件修改后的效果也要幾秒鐘才能在瀏覽器中反應(yīng)出來，代表如Webpack。那么Vite是如何解決如Webpack這樣的構(gòu)建工具一樣，在復(fù)雜、多模塊項(xiàng)目開發(fā)中啟動慢、HMR慢的問題呢？

我們詳細(xì)對比了開發(fā)環(huán)境中的Vite和Webpack，發(fā)現(xiàn)主要有如下不同：

Webpack	Vite
先打包生成bundle，再啟動開發(fā)服務(wù)器	先啟動開發(fā)服務(wù)器，利用新一代瀏覽器的ESM能力，無需打包，直接請求所需模塊并實(shí)時編譯
HMR時需要把改動模塊及相關(guān)依賴全部編譯	HMR時只需讓瀏覽器重新請求該模塊，同時利用瀏覽器的緩存（源碼模塊協(xié)商緩存，依賴模塊強(qiáng)緩存）來優(yōu)化請求
內(nèi)存高效利用	-

因此，針對開發(fā)環(huán)境中的啟動慢問題，Vite開發(fā)環(huán)境冷啟動無需打包，無需分析模塊之間的依賴，同時也無需在啟動開發(fā)服務(wù)器前進(jìn)行編譯，啟動時還會使用esbuild來進(jìn)行預(yù)構(gòu)建。

而Webpack 啟動后會做一堆事情，經(jīng)歷一條很長的編譯打包鏈條，從入口開始需要逐步經(jīng)歷語法解析、依賴收集、代碼轉(zhuǎn)譯、打包合并、代碼優(yōu)化，最終將高版本的、離散的源碼編譯打包成低版本、高兼容性的產(chǎn)物代碼，這可滿滿都是 CPU、IO 操作啊，在 Node 運(yùn)行時下性能必然是有問題。

針對HMR慢，即使只有很小的改動，Webpack依然需要構(gòu)建完整的模塊依賴圖，并根據(jù)依賴圖來進(jìn)行轉(zhuǎn)換。而Vite利用了ESM和瀏覽器緩存技術(shù)，更新速度與項(xiàng)目復(fù)雜度無關(guān)?？梢钥吹?，如Snowpack、Vite這類面相非打包的構(gòu)建工具，在開發(fā)環(huán)境啟動時只需要啟動兩個Server，一個用于頁面加載，一個用于HMR的Websocket。當(dāng)瀏覽器發(fā)出原生的ESM請求，Server收到請求只需要編譯當(dāng)前文件后返回給瀏覽器，不需要管理依賴。

但同樣，vite也存在一些缺點(diǎn)，如下：

生態(tài)不及webpack，加載器、插件不夠豐富
生產(chǎn)環(huán)境esbuild構(gòu)建對于css和代碼分割不夠友好
沒被大規(guī)模重度使用，會隱藏一些問題

所以，這里我們還是以webpack的配置講解為主。

webpack極速配置技巧

1、使用npm init生成package.json

2、安裝五大基礎(chǔ)套件，五大基礎(chǔ)套件如下：

安裝webpack三大件：

webpack、webpack-cli、webpack-dev-server

安裝處理js使用的loader，例如處理es6、es7、es8、裝飾器，使之變成瀏覽器可以認(rèn)識的es5。
安裝處理css預(yù)編譯的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中進(jìn)行項(xiàng)目運(yùn)行配置

（1）如下為本示例項(xiàng)目的結(jié)構(gòu)目錄：

（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將對應(yīng)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文件, 

                  其中, 數(shù)組chunks中存放的是entry對象的key,

                  而這里是key值是index。

             */

            chunks: ['index'],

            /*

                4、要在打包后的index.html中排除引入的js文件, 

                  其中, 數(shù)組excludeChunks中存放的是entry對象的key,

                  而這里是key值是node_modules, 如果entry中的key值沒

                  有node_modules也沒關(guān)系，寫上也不會報錯。

             */

            excludeChunks: ['node_modules']

        })

    ],

    devServer: {

        open: true,

        host: 'localhost',

        port: 3300

    }

};