Webpack學習筆記

1、webpack

前端項目工程化的具體解決方案，打包工具

1. webpack基本使用

1. 項目中安裝：

#使用最新版本,能夠不指定版本
npm i webpack webpack-cli -D

2. 配置webpack

3. webpack.config.js 的做用

4. 自定義打包的入口和出口

2. webpack的插件

​ 經過安裝和配置第三方的插件，能夠拓展webpack的能力，從而讓webpack用起來

更方便。最經常使用的webpack插件有以下兩個:

1. webpack-dev-server

js代碼保存後，自動打包

• 1.1 安裝

#使用最新版本：
npm i webpack-dev-server  -D

• 1.2 配置

• 1.3 打包生成的文件

ctrl + s 後，就可自動打包

• 1.4 使用

實時打包後的js文件放置在內存中，在項目根路徑上，所以修改index.html中js的引入路徑,/表示根目錄

<!-- 使用webpack-cli-server -->
<script src="/build.js"></script>

# devServer 節點

實時處理的打包插件webpack-dev-server的配置項。

包括：打包完成是否自動打開瀏覽器；打包所使用的主機地址；打包所使用的端口號

2. html-webpack-plugin

• 2.1 安裝

• 2.2 配置，在webpack.config.js

• 2.3 解惑

最新版html-webpack-plugin插件是在注入在head標籤裏，並添加defer屬性，最後加載

注意：開啓實時打包後，刪除dist文件夾，npm run dev，依然能夠運行項目

3. clean-webpack-plugin

自動清理dist目錄下的舊文件

3. webpack中的loader

3.1 loader概述

​ 在實際開發過程當中，webpack默認只能打包處理以.js後綴名結尾的模塊。其餘

非.js後綴名結尾的模塊，webpack 默認處理不了，須要調用loader加載器纔可

以正常打包，不然會報錯!

loader 加載器的做用：協助webpack打包處理特定的文件模塊。好比：

• css-loader 能夠打包處理.css相關的文件
• less-loader 能夠打包處理.less相關的文件
• babel-loader 能夠打包處理webpack沒法處理的高級JS語法

3.2 loader的調用過程

3.3 打包處理css文件

3.4 打包處理less文件

3.5 打包處理樣式表中與url路徑相關的文件

limit參數：判斷是否轉換成base64格式的圖片

3.6 帶參數的loader的另外一種配置方式

3.7 打包處理js文件中的高級語法

記：2021年8月7日，webpack最新版已能夠正常打包class

配置：

4.打包發佈

4.1 爲何要打包發佈？

4.2 配置 webpack 的打包發佈

4.3 整理dist文件夾下的文件

• JavaScript文件統一放到 js 目錄中

• 圖片文件統一放在image目錄中

5. Source Map

​ Source Map就是一個信息文件，裏面儲存着位置信息。也就是說，Source Map文件中存儲着代碼壓縮混淆先後的對應關係。

​ 有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換後的代碼，可以極大的方便後期的調試.

5.1 webpack開發環境下的Source Map

默認Source Map的問題：

​ 報錯行號不一致

解決：

• 開發環境下：

5.2 webpack生產環境下的Source Map

如何解決報錯，調試問題？

• 1. 只定位行數不暴露源碼

//配置webpack.config.js
devtool: "nosources-source-map"

• 2. 定位行數暴露源碼

//配置webpack.config.js
devtool: "source-map"

5.3 Source Map 的最佳實踐