Webpack 基礎入門

一、Webpack 是什么

Webpack 是一款現代 JavaScript 應用程序的靜態模塊打包工具。在 Web 開發中，我們的項目會包含各種類型的文件，如 JavaScript、CSS、圖片等。Webpack 可以將這些文件打包成一個或多個文件，以便在瀏覽器中高效加載。它就像是一個超級管家，把項目中的各種資源整理打包，讓它們能更好地協同工作。

二、為什么要使用 Webpack

  1. 代碼拆分：可以將代碼拆分成多個塊，實現按需加載，提高頁面加載速度。比如一個大型項目，有些功能可能不是用戶一開始就需要的，Webpack 可以把這些功能代碼單獨打包，等用戶用到時再加載。
  2. 模塊加載：支持各種模塊加載方式，如 ES6 模塊、CommonJS 模塊等，統一管理項目中的模塊依賴。
  3. 處理不同類型文件：不僅能處理 JavaScript，還能處理 CSS、Sass、Less 等樣式文件，以及圖片、字體等資源文件。

三、Webpack 基礎入門

（一）安裝 Webpack

  1. 首先確保你已經安裝了 Node.js，因為 Webpack 是基于 Node.js 運行的。
  2. 全局安裝 Webpack 和 Webpack - CLI（命令行界面）：
npm install webpack webpack - cli -g

（二）創建項目結構

  1. 創建一個新的文件夾，例如webpack - demo。
  2. 在該文件夾下創建以下文件和文件夾：
    • src文件夾：用于存放源文件，在src文件夾下創建index.js文件。
    • dist文件夾：用于存放打包后的文件，這個文件夾一開始可以不存在，Webpack 會在打包時自動生成。

（三）編寫基礎代碼

在src/index.js中編寫如下代碼：

function add(a, b) {return a + b;
}
const result = add(1, 2);
console.log(result);

（四）配置 Webpack

在項目根目錄下創建webpack.config.js文件，內容如下：

const path = require('path');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')}
};

這里配置了入口文件entry為src/index.js，表示從這個文件開始打包；output指定了打包后的文件名filename為bundle.js，輸出路徑path為dist文件夾。

（五）執行打包

在命令行中進入項目根目錄，執行以下命令：

webpack - - config webpack.config.js

執行成功后，會在dist文件夾下生成bundle.js文件。這個文件就是打包后的文件，包含了src/index.js中的代碼以及相關依賴。

四、Webpack 核心功能

（一）加載器（Loaders）

  1. 作用：Webpack 本身只能處理 JavaScript 和 JSON 文件，Loaders 可以讓 Webpack 處理其他類型的文件，如 CSS、圖片等。
  2. 使用示例 - 加載 CSS 文件：
    • 安裝css - loader和style - loader：
npm install css - loader style - loader --save - dev
  • 在src文件夾下創建styles.css文件，添加一些簡單的樣式：
body {background - color: lightblue;
}
  • 修改src/index.js文件，引入styles.css：
import './styles.css';
function add(a, b) {return a + b;
}
const result = add(1, 2);
console.log(result);
  • 修改webpack.config.js文件，配置加載器：
const path = require('path');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]}
};

這里module.rules配置了一個規則，test表示匹配所有.css文件，use指定了使用style - loader和css - loader來處理這些文件。css - loader負責解析 CSS 文件，style - loader負責將解析后的 CSS 插入到 HTML 頁面中。

（二）插件（Plugins）

  1. 作用：插件可以擴展 Webpack 的功能，實現更復雜的任務，如代碼壓縮、生成 HTML 文件、提取 CSS 為單獨文件等。
  2. 使用示例 - 使用 HtmlWebpackPlugin 生成 HTML 文件：
    • 安裝html - webpack - plugin：
npm install html - webpack - plugin --save - dev
  • 修改webpack.config.js文件，添加插件配置：
const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'})]
};

這里引入了HtmlWebpackPlugin插件，配置了title為頁面標題，template指定了使用src/index.html作為模板來生成 HTML 文件。在src文件夾下創建index.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF - 8"><title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body><script src="bundle.js"></script>
</body>
</html>

再次執行打包命令，會在dist文件夾下生成一個 HTML 文件，并且自動引入了打包后的bundle.js文件。

  1. 常用插件補充
    • TerserPlugin：用于壓縮 JavaScript 代碼，減小文件體積，提升加載速度。它是 Webpack 4 + 版本默認的代碼壓縮插件，無需額外安裝。在webpack.config.js中配置如下：
const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const TerserPlugin = require('terser - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'})],optimization: {minimizer: [new TerserPlugin()]}
};
  • MiniCssExtractPlugin：將 CSS 從 JavaScript 文件中提取出來，生成單獨的 CSS 文件。這在生產環境中很有用，因為瀏覽器可以單獨緩存 CSS 文件。安裝命令：
npm install mini - css - extract - plugin --save - dev

在webpack.config.js中配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'}),new MiniCssExtractPlugin({filename:'styles.css'})]
};
  • CleanWebpackPlugin：在每次打包前清空輸出目錄，避免殘留舊文件。安裝命令：
npm install clean - webpack - plugin --save - dev

在webpack.config.js中配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const { CleanWebpackPlugin } = require('clean - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'}),new MiniCssExtractPlugin({filename:'styles.css'}),new CleanWebpackPlugin()]
};

（三）代碼拆分與按需加載配置

  1. 原理：Webpack 的代碼拆分是指將一個大的 JavaScript 文件拆分成多個小的文件，這些小文件可以在需要的時候再加載。按需加載就是在特定的時機（比如用戶點擊某個按鈕、訪問某個路由等）才加載對應的代碼塊，而不是在頁面一開始就加載所有代碼，從而提高頁面的初始加載速度和用戶體驗。
  2. 基礎配置：在 Webpack 4 + 版本中，可以使用splitChunks配置項來實現代碼拆分。在webpack.config.js中添加如下配置：
const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),// 為動態導入的代碼塊指定輸出路徑和文件名chunkFilename: '[name].[chunkhash].js'},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'})],optimization: {splitChunks: {chunks: 'all'}}
};

optimization.splitChunks.chunks: 'all’表示對所有類型的 chunk（入口 chunk、異步 chunk 等）都進行代碼拆分。這里output.chunkFilename用于指定非入口 chunk（動態導入的代碼塊）的輸出文件名，[name]會被替換為代碼塊的名稱，[chunkhash]會根據代碼塊內容生成哈希值，用于緩存控制。

  1. 實際應用示例 - 動態導入模塊實現按需加載：
    • 在src文件夾下創建一個新的文件math.js，編寫如下代碼：
export function multiply(a, b) {return a * b;
}
  • 修改src/index.js文件，通過動態導入的方式引入math.js模塊：
import './styles.css';
function add(a, b) {return a + b;
}
const result = add(1, 2);
console.log(result);
// 點擊按鈕時動態導入math.js模塊并調用multiply函數
document.addEventListener('DOMContentLoaded', function () {const button = document.createElement('button');button.textContent = '點擊計算乘法';document.body.appendChild(button);button.addEventListener('click', function () {import('./math.js').then((module) => {const product = module.multiply(3, 4);console.log('乘法結果:', product);});});
});

這里使用import(‘./math.js’)動態導入math.js模塊，這是 ES2020 引入的動態導入語法，Webpack 會自動將其拆分成一個單獨的代碼塊。當用戶點擊按鈕時，才會加載這個代碼塊，實現了按需加載。執行打包命令后，在dist文件夾下會生成除了bundle.js之外的math.[chunkhash].js文件，這就是拆分出來的代碼塊。

五、總結

通過以上步驟，我們對 Webpack 的基礎和核心功能有了初步了解。Webpack 還有很多高級特性，如代碼優化、熱模塊替換等，后續可以進一步深入學習。希望這篇文章能幫助大家順利入門 Webpack，開啟高效的 Web 開發之旅。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/70163.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/70163.shtml
英文地址，請注明出處：http://en.pswp.cn/web/70163.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

torchsparse安裝過程的問題

torchsparse安裝過程的問題

1、項目要求torchsparse githttps://github.com/mit-han-lab/torchsparse.gitv1.4.0 2、torch1.8.1cu111 nvcc--version&#xff1a;11.1 這個版本的cuda匹配的gcc、g經常是7.5。設置為7.5. &#xff08;這個gcc、g版本修改不一定&#xff0c;可以先進行后面的&#xff0c…
閱讀更多...
嵌入式音視頻開發（二）ffmpeg音視頻同步

嵌入式音視頻開發（二）ffmpeg音視頻同步

系列文章目錄 嵌入式音視頻開發&#xff08;零&#xff09;移植ffmpeg及推流測試 嵌入式音視頻開發&#xff08;一&#xff09;ffmpeg框架及內核解析 嵌入式音視頻開發&#xff08;二&#xff09;ffmpeg音視頻同步 嵌入式音視頻開發&#xff08;三&#xff09;直播協議及編碼器…
閱讀更多...
iOS App的啟動與優化

iOS App的啟動與優化

App的啟動流程 App啟動分為冷啟動和熱啟動 冷啟動&#xff1a;從0開始啟動App熱啟動&#xff1a;App已經在內存中&#xff0c;但是后臺還掛著&#xff0c;再次點擊圖標啟動App。 一般對App啟動的優化都是針對冷啟動。 App冷啟動可分為三個階段&#xff1a; dyld&#xff1a…
閱讀更多...
oppo，湯臣倍健，康冠科技25屆春招內推

oppo，湯臣倍健，康冠科技25屆春招內推

oppo&#xff0c;湯臣倍健&#xff0c;康冠科技25屆春招內推 ①康冠科技25屆春招 【職位】算法、軟件、硬件、技術&#xff0c;結構設計&#xff0c;供應鏈&#xff0c;產品&#xff0c;職能&#xff0c;商務 【一鍵內推】https://sourl.cn/2Mm9Lk 【內推碼】EVBM88 ②湯臣倍健…
閱讀更多...
centos 9 時間同步服務

centos 9 時間同步服務

在 CentOS 9 中&#xff0c;默認的時間同步服務是 chrony&#xff0c;而不是傳統的 ntpd。 因此&#xff0c;建議使用 chrony 來配置和管理時間同步。 以下是使用 chrony 配置 NTP 服務的步驟&#xff1a; 1. 安裝 chrony 首先&#xff0c;確保系統已安裝 chrony。 在 CentOS…
閱讀更多...
解鎖 Python 導入系統：從基礎到進階的深度指南

解鎖 Python 導入系統：從基礎到進階的深度指南

本文全面解讀 Python 導入系統&#xff0c;從導入機制的基礎概念&#xff0c;如模塊、包的導入方式&#xff0c;到查找、加載模塊的詳細過程&#xff0c;再到導入系統的高級特性和應用場景&#xff0c;通過豐富示例、直觀圖表和對比分析&#xff0c;助你深入理解并熟練運用導入…
閱讀更多...
DDoS技術解析

DDoS技術解析

這里是Themberfue 今天我們不聊別的&#xff0c;我們聊聊著名的網絡攻擊手段之一的 DDoS&#xff0c;看看其背后的技術細節。 DoS 了解 DDoS 前&#xff0c;先來講講 DoS 是什么&#xff0c;此 DoS 而不是 DOS 操作系統啊。1996年9月6日&#xff0c;世界第三古老的網絡服務提供…
閱讀更多...
docker安裝kafka,并通過springboot快速集成kafka

docker安裝kafka,并通過springboot快速集成kafka

目錄 一、docker安裝和配置Kafka 1.拉取 Zookeeper 的 Docker 鏡像 2.運行 Zookeeper 容器 3.拉取 Kafka 的 Docker 鏡像 4.運行 Kafka 容器 5.下載 Kafdrop 6.運行 Kafdrop 7.如果docker pull wurstmeister/zookeeper或docker pull wurstmeister/kafka下載很慢&#x…
閱讀更多...
C++ 與 Java 的對比分析：除法運算中的錯誤處理

C++ 與 Java 的對比分析：除法運算中的錯誤處理

博客主頁&#xff1a; [小????????] 本文專欄: Java 文章目錄 &#x1f4af;前言&#x1f4af;C中的除法錯誤處理&#x1f4af;Java中的除法錯誤處理&#x1f4af;C與Java錯誤處理的對比&#x1f4af;錯誤處理的優化和實踐&#x1f4af;小結 &#x1f4af;前言 在…
閱讀更多...
LLM之循環神經網絡(RNN)

LLM之循環神經網絡(RNN)

在人工智能的領域中&#xff0c;神經網絡是推動技術發展的核心力量。今天&#xff0c;讓我們深入探討循環神經網絡&#xff08;RNN&#xff09; 一、神經網絡基礎 &#xff08;1&#xff09;什么是神經網絡 神經網絡&#xff0c;又稱人工神經網絡&#xff0c;其設計靈感源于人…
閱讀更多...
SQL sever數據導入導出實驗

SQL sever數據導入導出實驗

1.創建數據庫TCP-H &#xff08;1&#xff09;右鍵“數據庫”&#xff0c;點擊“新建數據庫”即可 &#xff08;2&#xff09;用sql語言創建&#xff0c;此處以創建數據庫DB_test為例&#xff0c;代碼如下&#xff1a; use master;go--檢查在當前服務器系統中的所有數據里面…
閱讀更多...
讓編程變成一種享受-明基RD320U顯示器

讓編程變成一種享受-明基RD320U顯示器

引言 作為一名有著多年JAVA開發經驗的從業者&#xff0c;在工作過程中&#xff0c;顯示器的重要性不言而喻。它不僅是我們與代碼交互的窗口&#xff0c;更是影響工作效率和體驗的關鍵因素。在多年的編程生涯中&#xff0c;我遇到過各種各樣的問題。比如&#xff0c;在進行代碼…
閱讀更多...
計算機網絡（涵蓋OSI，TCP/IP，交換機，路由器，局域網）

計算機網絡（涵蓋OSI，TCP/IP，交換機，路由器，局域網）

一、網絡通信基礎 &#xff08;一&#xff09;網絡通信的概念 網絡通信是指終端設備之間通過計算機網絡進行的信息傳遞與交流。它類似于現實生活中的物品傳遞過程&#xff1a;數據&#xff08;物品&#xff09;被封裝成報文&#xff08;包裹&#xff09;&#xff0c;通過網絡…
閱讀更多...
圖像處理篇---基本OpenMV圖像處理

圖像處理篇---基本OpenMV圖像處理

文章目錄 前言1. 灰度化&#xff08;Grayscale&#xff09;2. 二值化&#xff08;Thresholding&#xff09;3. 掩膜&#xff08;Mask&#xff09;4. 腐蝕&#xff08;Erosion&#xff09;5. 膨脹&#xff08;Dilation&#xff09;6. 縮放&#xff08;Scaling&#xff09;7. 旋轉…
閱讀更多...
SpringMVC重定向接口，參數暴露在url中解決方案！RedirectAttributes

SpringMVC重定向接口，參數暴露在url中解決方案！RedirectAttributes

OK&#xff0c;首先描述下業務場景&#xff0c;終端數量限制登錄 1.首先訪問項目login的get接口 2.輸入賬號密碼點擊登錄后&#xff0c;會請求login的POST接口 3.后臺對終端數量邏輯處理不允許登錄跳回到登錄頁面 4.因代碼原因需在后臺進行多次重定向接口&#xff0c;最后跳…
閱讀更多...
Spring Boot01(注解、)---java八股

Spring Boot01(注解、)---java八股

Spring Boot中常用注解及其底層實現 1、SpringBootApplication注解&#xff1a; SpringBootApplication注解&#xff1a;這個注解標識了一個SpringBoot工程&#xff0c;它實際上是另外三個注解的組合&#xff0c;這三個注解是&#xff1a; aSpringBootConfiguration&#xff1a…
閱讀更多...
?2.快速了解HTML5的標簽類型

?2.快速了解HTML5的標簽類型

??HTML5 的標簽類型豐富多樣&#xff0c;每種類型都有其獨特的功能和用途&#xff0c;以下是一些常見的 HTML5 標簽類型介紹&#xff1a; &#x1f98b;結構標簽 &#x1faad;<html>&#xff1a;它是 HTML 文檔的根標簽&#xff0c;所有其他標簽都包含在這個標簽內&am…
閱讀更多...
eNSP防火墻綜合實驗

eNSP防火墻綜合實驗

一、實驗拓撲 二、ip和安全區域配置 1、防火墻ip和安全區域配置 新建兩個安全區域 ip配置 Client1 Client2 電信DNS 百度web-1 聯通DNS 百度web-2 R2 R1 三、DNS透明代理相關配置 1、導入運營商地址庫 2、新建鏈路接口 3、配置真實DNS服務器 4、創建虛擬DNS服務器 5、配置D…
閱讀更多...
Linux 配置交換空間（Swap）解決內存不足

Linux 配置交換空間（Swap）解決內存不足

&#x1f680; 作者主頁&#xff1a; 有來技術 &#x1f525; 開源項目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 倉庫主頁&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 歡迎點贊 &#x1f44d; 收藏 ?評論 …
閱讀更多...
個人shell腳本分享

個人shell腳本分享

在周一到周五做增量備份&#xff0c;在周六周日做完全備份 #!/bin/bash定義變量 SRC“/path/to/source” # 源目錄 BKUP“/backup” # 備份主目錄 FUL“KaTeX parse error: Expected EOF, got # at position 22: …ull" #? 完全備份目錄 INC"BKUP/inc” # 增量備份…
閱讀更多...
最新文章

Copyright @ 2022~2023