一、目標(biāo)

• 能夠說出什么是前端工程化
• 能夠說出webpack的作用
• 能夠掌握webpack的基本使用
• 了解常用plugin的基本使用
• 了解常用loader的基本使用
• 能夠說出Source Map的作用

二、目錄

1. 前端工程化
2. webpack的基本使用
3. webpack中的插件
4. webpack中的loader
5. 打包發(fā)布
6. Source Map

1.前端工程化

1.1小白眼中的前端開發(fā)vs實(shí)際的前端開發(fā)

實(shí)際的前端開發(fā)：

• 模塊化（js的模塊化、css的模塊化、其他資源的模塊化）
• 組件化（復(fù)用現(xiàn)有的UI結(jié)構(gòu)、樣式、行為）
• 規(guī)范化（目錄結(jié)構(gòu)的劃分、編碼規(guī)范化、接口規(guī)范化、文檔規(guī)范化、GIt分支管理）
• 自動(dòng)化 （自動(dòng)化構(gòu)建、自動(dòng)部署、自動(dòng)化測(cè)試）

2.什么是前端工程化

前端工程化指的是：在企業(yè)級(jí)的前端項(xiàng)目開發(fā)中，把前端開發(fā)所需的工具、技術(shù)、流程、經(jīng)驗(yàn)等進(jìn)行規(guī)范化、標(biāo)準(zhǔn).化。最終落實(shí)到細(xì)節(jié)上，就是實(shí)現(xiàn)前端的“4個(gè)現(xiàn)代化”

模塊化、組件化、規(guī)范化、自動(dòng)化

3.前端工程化的好處

①前端工程化讓前端開發(fā)能夠“自成體系”，覆蓋了前端項(xiàng)目從創(chuàng)建到部署的方方面面

②最大程度的提高了前端的開發(fā)效率，降低了技術(shù)選型、前后端聯(lián)調(diào)等帶來的協(xié)調(diào)溝通成本。

4.前端工程化的解決方案

最早期的前端工程化解決方案：

• grunt(https://www.gruntjs.net/)
• gulp(https://www.gulpjs.cn/)

目前主流的前端工程化解決方案：

• webpack (https://www.webpackjs.com/)
• parcel (https://zh.parceljs.org/)

2.webpack的基本使用

2.1什么是webpack

概念：webpack是前端項(xiàng)目工程化的具體解決方案。

主要功能：它提供了友好的前端模塊化開發(fā)支持，以及代碼壓縮混淆、處理瀏覽器端JavaScript的兼容性、性能優(yōu)化等強(qiáng)大的功能。

好處：讓程序員把工作的重心放到具體功能的實(shí)現(xiàn)上，提高了前端開發(fā)效率和項(xiàng)目的可維護(hù)性。

注意：目前企業(yè)級(jí)的前端項(xiàng)目開發(fā)中，絕大多數(shù)的項(xiàng)目都是基于webpack進(jìn)行打包構(gòu)建的。

2.2創(chuàng)建列表隔行變色項(xiàng)目

2.3在項(xiàng)目中安裝webpack

在終端?運(yùn)行如下的命令，安裝webpack相關(guān)的兩個(gè)包：

2.4在項(xiàng)目中配置webpack

①在項(xiàng)目根目錄中，創(chuàng)建名為webpack.config.js的webpack配置文件，并初始化如下的基本配置：

?②在package.json的acripts節(jié)點(diǎn)下，新增dev腳本如下：

③在終端中運(yùn)行npm run dev命令，啟動(dòng)wbpack進(jìn)行項(xiàng)目的打包構(gòu)建。?

④將js引入路徑進(jìn)行更換，更換成生成的兼容性的.js文件

2.webpack的基本使用

4.1mode的可選值

mode節(jié)點(diǎn)的可選值有兩個(gè)，分別是：

①development

• 開發(fā)環(huán)境
• 不會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化
• 打包速度快，適合在開發(fā)階段使用

②production

• 生產(chǎn)環(huán)境
• 會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化
• 打包速度很慢，僅適合在項(xiàng)目發(fā)布階段使用

4.2 webpack.config.js文件的使用

webpack.config.js是webpack的配置文件。webpack在真正開始打包構(gòu)建之前，會(huì)先讀取這個(gè)配置文件，從而基于給定的配置，對(duì)項(xiàng)目進(jìn)行大包。

注意：由于webpack是基于node.js開發(fā)出來的打包工具，因此在它的配置文件中，支持使用node.js相關(guān)的語法和模塊進(jìn)行webpack的個(gè)性化配置。

4.3webpack中的默認(rèn)約定

在webpack中有如下的默認(rèn)約定：

①默認(rèn)的打包入口文件為src->index.js

②默認(rèn)的輸出文件路徑為dist->main.js

注意：可以在webpack.config.js中修改打包的默認(rèn)約定

4.4自定義打包的入口與出口

在webpack.config.js配置文件中，通過entry節(jié)點(diǎn)指定打包的入口。通過output節(jié)點(diǎn)指定打包的出口。

實(shí)例代碼如下：

?webpack.config.js配置如下:

const path = require('path')
module.exports = {
    mode: 'development', //development  production
    //指定打包入口
    entry: path.join(__dirname, './src/index.js'),
    //指定打包出口
    output: {
        //表示輸出文件的存放路徑
        path: path.join(__dirname, './dist'),
        //輸出文件的名稱
        filename: 'bundle.js'
    }
}

當(dāng)修改完代碼后，必須重新 npm run (package.json中的scripts)

3.webpack中的插件

1.webpack插件的作用

通過安裝和配置第三方的插件，可以拓展webpack的能力，從而讓webpack用起來更方便。最常用的webpack插件有如下兩個(gè)：

①webpack-dev-server

• 類似于node.js階段用到的nodemon工具
• 每當(dāng)修改了源代碼,webpack會(huì)自動(dòng)進(jìn)行項(xiàng)目的打包和構(gòu)建

②html-webpack-plugin

• webpack中的HTML插件（類似于一個(gè)模板引擎插件）
• 可以通過此插件自定制index.html頁面的內(nèi)容

2.webpack-dev-server

webpack-dec-server可以讓webpack監(jiān)聽項(xiàng)目源代碼的變化，從而進(jìn)行自動(dòng)打包構(gòu)建

2.1安裝webpack-dev-server

運(yùn)行如下命令：

?2.2 配置webpack-dev-server

①修改package.json->scripts中的dev命令如下：

?②再次運(yùn)行npm run dev命令，重新進(jìn)行項(xiàng)目的打包

③在瀏覽器中訪問http://localhost:8080地址。查看自動(dòng)打包效果

注意：webpack-dev-server會(huì)啟動(dòng)一個(gè)實(shí)時(shí)打包的http服務(wù)器

2.3打包生成的文件去哪了？

①不配置webpack-dev-server的情況下，webpack打包生成的文件，會(huì)存放到實(shí)際的物理磁盤上

• 嚴(yán)格遵守開發(fā)者在webpack.config.js中指定配置
• 根據(jù)output節(jié)點(diǎn)指定路徑進(jìn)行存放

②配置了webpack-dev-server之后，打包生成的文件存放到了內(nèi)存中

• 不再根據(jù)output節(jié)點(diǎn)指定的路徑，存放到實(shí)際的物理磁盤上
• 提高了實(shí)時(shí)打包輸出的性能，因?yàn)閮?nèi)存比物理磁盤速度快很多

2.4 生成到內(nèi)存中的文件該如何訪問？

webpack-dev-server生成到內(nèi)存中的文件，默認(rèn)放到了項(xiàng)目的根目錄中，而且是虛擬的、不可見的。

3.html-webpack-plugin????????

html-webpack-plugin是webpack中的HTML插件，可以通過此插件自定制index.html頁面的內(nèi)容。

需求;通過html-webpack-plugin插件，將src目錄下的index.html首頁，復(fù)制到項(xiàng)目根目錄中一份！

3.1安裝html-webpack-plugin

?3.2配置html-webpack-plugin

?3.3 解惑html-webpack-plugin

①通過HTML插件復(fù)制到項(xiàng)目根目錄中的index.html頁面，也被放到了內(nèi)存中

②HTML插件在生成的index.html頁面的底部，自動(dòng)注入了打包的bundle.js文件

（無需再手動(dòng)引入樣式）

tip:當(dāng)我們刪除dist文件不影響我們觀看頁面效果，因?yàn)槲覀円呀?jīng)實(shí)時(shí)代碼

4.devServer節(jié)點(diǎn)

在webpack.config.js配置文件中，可以通過devServer節(jié)點(diǎn)對(duì)webpack-dev-server插件進(jìn)行更多的配置，示例代碼如下：

4. webpack中的loader

1.loader概述

在實(shí)際開發(fā)過程中，webpack默認(rèn)只能打包處理以.js后綴名結(jié)尾的模塊。其他非.js后綴名結(jié)尾的模塊。webpack默認(rèn)處理不了，需要調(diào)用loader加載器才可以正常打包，否則會(huì)報(bào)錯(cuò)！

loder加載器的作用：協(xié)助webpack打包處理待定的文件模塊。比如：

• css-loader可以打包處理.css相關(guān)的文件
• less-loader可以打包處理.less相關(guān)的文件
• babel-loader可以打包處理webpack無法處理的高級(jí)JS語法

2.loader的調(diào)用過程

3.打包處理CSS文件?

webpack中一切皆模塊。在.js文件中導(dǎo)入.css樣式后會(huì)報(bào)錯(cuò)，webpack只能打包處理.js結(jié)尾的文件，當(dāng)遇到非.js結(jié)尾的文件，會(huì)尋找第三方處理。

①運(yùn)行npm i style-loader@2.0.0 css-loader@5.0.1 -D命令，安裝處理css文件的loader

②在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下：

?其中，text表示匹配的文件類型，use表示對(duì)應(yīng)要調(diào)用的loader

注意：

• use數(shù)組中指定的loader順序是固定的
• 多個(gè)loader的調(diào)用順序是：從后往前調(diào)用

4.打包處理less文件

當(dāng)導(dǎo)入.less文件時(shí)，需要安裝loader

①運(yùn)行npm i less-loader@7.1.0 less@3.12.2 -D命令

②在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下：

?5.打包處理樣式表中與url路徑相關(guān)的文件

①運(yùn)行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令

②在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下：

樣式表中引用太多的小圖片會(huì)導(dǎo)致網(wǎng)頁發(fā)起一些不必要的網(wǎng)絡(luò)請(qǐng)求，我們可以把那些小圖片轉(zhuǎn)成base64的格式，如何控制哪些圖片轉(zhuǎn)，哪些圖片不轉(zhuǎn)，現(xiàn)在用到urk-loder參數(shù)項(xiàng)了（limit代表圖片的體積，只有這個(gè)圖片小于或等于22229時(shí)，圖片才會(huì)轉(zhuǎn)成base64）。

其中?之后的是loader的參數(shù)項(xiàng)：

• limit用來指定圖片的大小，單位是字節(jié)（byte）
• 只有<=limit大小的圖片，才會(huì)被轉(zhuǎn)成base64格式的圖片。

5.1 loader的另一種配置方式

帶參數(shù)項(xiàng)的loader還可以通過對(duì)象的方式進(jìn)行配置：

?6.打包處理js文件中的高級(jí)語法

webpack只能打包處理一部分高級(jí)的javaScript語法。對(duì)于那些webpack無法處理的高級(jí)js語法，需要借助于babel-loader進(jìn)行打包處理。例如webpack無法處理下面的javascript代碼：

?6.1安裝babel-loader相關(guān)的包

運(yùn)行如下的命令安裝對(duì)應(yīng)的依賴吧：

包的名稱及版本號(hào)列表如下（紅色的是包的名稱、黑色是包的版本號(hào)）;

• babel-loader@8.2.1
• @babel/core@7.12.3
• @babel/plugin-proposal-class-properties@7.12.1?

6.2 配置babel-loader

在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下：

?5.打包發(fā)布

1.為什么要打包發(fā)布

項(xiàng)目開發(fā)完成之后，使用webpack對(duì)項(xiàng)目進(jìn)行打包發(fā)布的主要原因有以下兩點(diǎn)：

①開發(fā)環(huán)境下，打包生成的文件存放于內(nèi)存中，無法獲取到最終打包生成的文件。

②開發(fā)環(huán)境下，打包生成的文件不會(huì)進(jìn)行代碼壓縮和性能優(yōu)化

2.配置webpack的打包發(fā)布

在package.json文件的scripts節(jié)點(diǎn)下，新增build命令如下：

?--model是一個(gè)參數(shù)項(xiàng)，用來指定webpack的運(yùn)行模式。production代表生產(chǎn)環(huán)境，會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化。

注意：通過--model指定的參數(shù)項(xiàng)，會(huì)覆蓋webpack.config.js中的model選項(xiàng)。

3.把javascript文件統(tǒng)一生成到j(luò)s目錄中

在webpack.config.js配置文件的output節(jié)點(diǎn)中，進(jìn)行如下的配置：

?4.把圖片文件統(tǒng)一生成到image目錄中

修改webpack.config.js中的url-loader配置項(xiàng)，新增outputPath選項(xiàng)即可指定圖片文件的輸出路徑：

5.自動(dòng)清理dist目錄下的舊文件

為了在 每次打包發(fā)布時(shí)自動(dòng)清理掉dist目錄中的舊文件，可以安裝并配置clean-webpack-plugin插件：

?6.企業(yè)級(jí)項(xiàng)目的打包發(fā)布

企業(yè)級(jí)的項(xiàng)目在進(jìn)行打包發(fā)布時(shí)，遠(yuǎn)比剛才的方式要復(fù)雜的多，主要的發(fā)布流程如下：

• 生成打包報(bào)告，根據(jù)報(bào)告分析具體的優(yōu)化方案
• Tree-Shaking
• 為第三方庫啟用CDN加載
• 配置組件的按需加載
• 開啟路由懶加載
• 自定制首頁內(nèi)容

6.Source Map

1.生產(chǎn)環(huán)境遇到的問題

前端項(xiàng)目在投入生產(chǎn)環(huán)境之前，都需要對(duì)JavaScript源代碼進(jìn)行壓縮混淆，從而減小文件的體積，提高文件的加載效率。此時(shí)就不可避免的產(chǎn)生了另一個(gè)問題：

對(duì)壓縮混淆之后的代碼除錯(cuò)，是一件極其困難的事情。

• 變量被替換成了沒有任何語義的名稱
• 空行和注釋被踢出?

2.什么是Source Map

Source Map就是一個(gè)信息文件，里面存儲(chǔ)著位置信息。也就是說，Source Map文件中存儲(chǔ)著代碼壓縮混淆前后的對(duì)應(yīng)關(guān)系。

有了它，出錯(cuò)的時(shí)候，除錯(cuò)工具直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼，能歐極大地方便后期的調(diào)試。

3.webpack開發(fā)環(huán)境下的Source Map

在開發(fā)環(huán)境下，webpack默認(rèn)啟用了Source Map功能。當(dāng)程序運(yùn)行出錯(cuò)時(shí)，可以直接在控制臺(tái)提示錯(cuò)誤行的位置，并定位到具體的源代碼：

3.1默認(rèn)Source Map的問題

開發(fā)環(huán)境下默認(rèn)生成的Source Map,記錄的是生成后的代碼的位置。會(huì)導(dǎo)致運(yùn)行時(shí)報(bào)錯(cuò)的行數(shù)與源代碼的行數(shù)不一致的問題。示意圖如下：

?

3.2解決默認(rèn)Source Map的問題?

開發(fā)環(huán)境下，推薦在webpack.config.js中添加如下的配置，即可保證運(yùn)行時(shí)報(bào)錯(cuò)的行數(shù)與源代碼的行數(shù)保持一致;

4.webpack生產(chǎn)環(huán)境下的Source Map

?在生產(chǎn)環(huán)境下，如果省略了devtool選項(xiàng)，則最終生成的文件中不包含Source Map。這能夠防止原始代碼通過Source Map的形式暴露給別有所圖之人。

?4.1只定位行數(shù)不暴露原碼

在生產(chǎn)環(huán)境下，如果只想定位報(bào)錯(cuò)的具體行數(shù)，且不想暴露源碼。此時(shí)可以將devtool的值設(shè)置為nosources-source-map。實(shí)際效果如圖所示：

?4.2定位行數(shù)且暴露源碼

在生產(chǎn)環(huán)境下，如果想在定位報(bào)錯(cuò)行數(shù)的同時(shí)，展示具體報(bào)錯(cuò)的源碼。此時(shí)可以將devtool的值設(shè)置為source-map。實(shí)際效果如圖所示：

5.Source Map的最佳實(shí)踐

?①開發(fā)環(huán)境下：

• 建議把devtool的值設(shè)置為eval-source-map
• 好處：可以精準(zhǔn)定位到具體的錯(cuò)誤行

②生產(chǎn)環(huán)境下：

• 建議關(guān)閉Source Map或?qū)evtool的值設(shè)置為nosource-source-map
• 好處：防止源碼泄露，提高網(wǎng)站的安全性

?實(shí)際開發(fā)中需要自己配置webpack嗎？

答案：不需要

• 實(shí)際開發(fā)中會(huì)使用命令行工具（俗稱CLI）一鍵生成帶有webpack的項(xiàng)目
• 開箱即用，所有webpack配置項(xiàng)都是現(xiàn)成的！
• 我們只需要知道webpack中的基本概念即可！

?文章來源地址http://www.zghlxwxcb.cn/news/detail-549657.html

到了這里，關(guān)于前端工程化與webpack的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！