webpack4.0+簡要

来源:https://www.cnblogs.com/codeOnMar/archive/2023/11/27/17460562.html
-Advertisement-
Play Games

一、webpack簡介 webpack 是當下十分流行的一款靜態模塊打包工具，將JS、CSS、HTML、圖片等各種靜態資源視為一個個模塊，通過一個或者多個入口文件通過解析依賴關係生成一個依賴圖，最終打包成一個或者多個bundles，webpack本身只能打包JS文件，但是通過配置的loader和pl ...


一、webpack簡介

　　webpack 是當下十分流行的一款靜態模塊打包工具，將JS、CSS、HTML、圖片等各種靜態資源視為一個個模塊，通過一個或者多個入口文件通過解析依賴關係生成一個依賴圖，最終打包成一個或者多個bundles，webpack本身只能打包JS文件，但是通過配置的loader和plugin可以打包Css和Html等其他格式的文件，本文基於webpack5為基礎的，其中webpack4前後版本區別很大，使用時需要註意區別版本。

　　webpack和glup、grunt的區別：webpack可以說是一種模塊化解決方案，內嵌服務支持項目獨立開發，同時可以打包單頁面、多頁面和提取公共模塊以及處理圖片文件。只打包被引用的文件，同時搭配強大的loader和plugin支持打包不同類型的語言，傻瓜式配置即可使用；grunt和glup則是基於任務式的打包工具，主要是用於編譯CSS和JS，主要是用來合併、壓縮和拷貝文件，不支持模塊化打包。

二、配置詳解

　　常用配置概覽

module.exports = {
　// 模式，webpack針對不同模式設置內部優化項，設置後會自動調起優化項
　mode: 'development',
  // 入口 可以配置為相對路徑或者絕對路徑
  entry: './src/index.js',

  // 輸出文件名稱和路徑, 
  // path.reslove()返回一個絕對路徑，__dirname當前文件的文件夾絕對路徑
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 打包輸出文件名
    filename: 'main.js',
    // chunkFilename 指未被列在 entry 中，卻又需要被打包出來的 chunk 文件的名稱。一般來說，這個 chunk 文件指的就是要懶載入的代碼
    chunkFilename: '[id].js',
    // 下次打包時將上次打包目錄下的資源清空
    clean: true
  },
  // 載入器
  module: {
    rules: [],
  },
  // 插件
  pulgins: [],
  // 模式
  mode: 'development',
  // 
  devtool: '',
  // 設置webpack如何解析模塊，如別名、擴展名等
  resolve: {
    // 模塊的尾碼名，引入這些模塊時不需要寫擴展名，自動補充擴展名
    extensions: ['.js', '.json', '.css']
  },
  // 本地服務配置
  devServer: {
    // 指定埠
    port: 8000,
    // 是否開啟模塊熱交換功能
    hot: true,
    // 是否自動在瀏覽器打開網頁
    open: true
  },
  // 打包時排除編譯該文件
  externals: {
    jquery: 'JQuery'
  },
  // 打包代碼優化，進行公共代碼提取，代碼壓縮，去除冗餘代碼等功能
  optimization: {
    splitChunks: {
      chunks: 'all',
      // 打包文件大於30kb時會被分割
      minSize: 30 * 1024, 
      // 最大沒有限制
      maxSize: 0,
      // 要提取的chunk最少被引用1次
      minChunks: 1,
      cacheGroups: {
        // node_modules下的文件會被打包到wendors中
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          // 優先順序
          priority: -10
        },
        // 提取公共組件
        commons: {
          name: 'chunk-commons',
          test: resolve('src/components'),
          minChunks: 3,
          priority:10
        }
      }
    }
  }
}

　　

　　1. entry：打包入口，webpack打包從此處開始，通過解析依賴載入來構建依賴關係圖，包含格式有包含格式有：string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })，可以配置：

// 單入口單模塊 
entry: './index.js',

// 多入口單模塊(多個入口一個出口)
entry: ['./src/Component1/main.js', './src/Component2/main.js'],

// 多入口
entry:{ com1: './src/Component1/main.js', './src/Component1/main.js' },

// 接受通過函數方式返回配置 
entry: glob.sync('./src/**/main.js').reduce((acc, path) => {
　　const entry = path.substring(path.indexOf('/src/') + 5, path.lastIndexOf('/main.js'));
　　acc[entry] = path; return acc;
}, {}),

　　2. output：打包文件輸出配置，支持設置entry對應的name、id、hash、contenthash，需要註意filename和chunkFilename的區別

filename: "[name].[id].[contenthash].[hash:7].js",

　　3. mode：模式，內嵌development和production以及none三種模式，針對開發和生產兩種場景內置不同的優化項，比如壓縮、去除冗餘代碼等

　　4. module：模塊化配置，由於webpack只能解析JS，所以針對CSS、TS、SASS等無法解析的類型需要通過配置不同的loader進行處理編譯。

　　　　4.1 style-loader: 將編譯完成的CSS樣式掛載到style標簽上，實際使用中一般放在第一位，因為loader都是從右到左，從下往上執行

// 解析CSS 
rules: [{
	test: /\.css/,
	use: ['style-loader']
}]

　　　　4.2 css-loader：識別.css文件，處理CSS一般需要配合style-loader使用，否則樣式不會生效，或者安裝MiniCssExtractPlugin將文件單獨打包

rules: [{
    test: /\.css$/,
    // use: ['style-loader', 'css-loader'],
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
    // 可以排除對應文件夾的內容按照該rule進行打包
    exclude: /node_modules/
}]

　　　　4.3  sass-loader處理.sass類型樣式文件、postcss-loader用於補充CSS樣式在各個瀏覽器內核的首碼，不需要手動寫

// 打包SASS
rules: [{
	test: /\.scss$/,
	use: [
	  'style-loader', 'css-loader', 'sass-loader', 'postcss-loader',
	],
	include: '/sc/'
}]

　　　　4.4 bable-loader: 將ES6+語法轉換為ES5語法。需要配合@bable/core 和bable/preset-env來使用

// 打包JS
rules: [{
  test: /\.js$/,
  use: {
	loader: 'bable-loader',
	options: {
	  presets: [[ 'bable/preset-env', { targets: 'defaults' } ]]
	}
  }
}]

　　　　4.5 html-loader：將 HTML 導出為字元串。當編譯器需要時，將壓縮 HTML 字元串。

　　　　4.6 file-loader：處理文件資源，比如jpg、png等圖片

// 處理圖片資源
rules: [{
  test: /\.(png|jpg|jpeg)$/,
  use:[
	{
	  loader: 'file-loader',
	  options: {
		name: '[name]_[hash:8].[ext]'
	  }
	}
  ]
}]

　　　　4.7 url-loader：同樣是處理圖片資源，與file-loader不同的是可以根據tip的大小決定是否將圖片生成Base64保存到JS文件里，方便快速載入

// 處理圖片資源
rules: [{
  test: /\.(png|jpg|jpeg)$/,
  use:[
	{
	  loader: 'url-loader',
	  options: {
		name: '[name]_[hash:8].[ext]',
　　　　 // 當小於10kb時轉換為base64打包到JS當中，否則保存為圖片
　　　　 limit: 10240
	  }
	}
  ]
}]

　　　　4.8 其餘還有vue-loader 載入和解析vue文件；eslint-loader 通過eslint檢查JS代碼；i18n-loader 載入多語言版本，支持國際化。

　　　　註：官方loader查看地址  https://webpack.js.org/loaders/

      5. plugins: 插件，和loader一樣是webpack的支柱功能，主要解決loader無法解決的問題，需要使用某個插件時，首先需要安裝，其次引入文件到本地中，最後才能使用

　　　　5.1 clean-webpack-plugin：打包前清理dist目錄下的內容，避免再次打包時文件覆蓋，之前的老文件遺留下來

　　　　5.2 copy-webpack-plugin：拷貝某個目錄下的文件到dist下的某個目錄，

new CopyWebpackPlugin([
  // 將src目錄下的內容拷貝到dist/common下
  { from: './src', to: './common' }
])

　　　　5.3 html-webpack-plugin：生成html文件，以及自動引入打包好的css文件和JS文件(由於打包後的JS和CSS為了避免緩存都會動態生成文件名，所以每次打包手動引入比較麻煩)

// 單頁面打包
new HtmlWebpackPlugin({ template: './index.html' }),

// 多頁面打包
entry: {
  com1: './src/Component1/main.js',
  com2: './src/Component2/main.js'
},

plugins: [
    new HtmlWebpackPlugin({
	  // 使用模板
      template: path.join(__dirname, 'src/component1/index.html'),
	  // 打包後的文件名
      filename: 'com1.html',
	  // 和入口文件的key值相對應
      chunks: ['com1']
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/component2/index.html'),
      filename: 'com2.html',
      chunks: ['com2']
    })
],

　　

　　　　5.4  mini-css-extract-plugin：打包好的樣式一般通過style-loader會插入大頁面中，但是如果想要實現CSS分離生成單獨的文件，可以通過這個組件實現，但是需要配合前文中的loader使用

rules: [{
	test: /\.css$/,
	use: [MiniCssExtractPlugin.loader, 'css-loader']
}],

plugins: [
    new HtmlWebpackPlugin({ template: './index.html' }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
],

　　　　5.5 自定義組件AddAuthorPlugin開發和使用：

// 在plugin文件夾下新增一個add-author-plugin.js文件
// 其中apply是內置方法
class AddAuthorPlugin {
  constructor(options = {}) {
    this.author = options.author;
    this.date = options.date;
  }
  apply(compiler) {
    compiler.hooks.compile.tap('AddAuthorPlugin', (compilation, callback) => {
    　　console.log('***');
    })
  }
}

module.exports = AddAuthorPlugin;

// 使用的時候
const AddAuthorPlugin = require('./plugin/add-author-plugin');

new AddAuthorPlugin({ author: '張三', date: new Date() });

　　打包時如何調測自定義組件：

　　首先執行命令 node --inspect-brk .\node_modules\webpack-cli\bin\cli.js，然後在chrome瀏覽器中輸入 chrome://inspect/#devices 回車後，點擊 Open dedicated DevTools for Node 就可以進入調測模式，為了方便打斷點，可以現在代碼中設置debugger。詳細步驟看錄屏

 

　　　　註：官方plugin查看地址 https://webpack.js.org/plugins/

　　6. devtool：已不同的方式打包文件，配置項總共有十幾種，為了區分開發環境和生產環境，主要介紹下麵幾種

　　　　6.1 開發環境推薦使用：

　　　　eval：每個模塊都使用eval執行，速度非常快，但是不會顯示正確的行號，所以沒法進行調試

　　　　eval-source-map：，每個模式使用eval()執行，起初是緩慢的，但是重建的速度較快而且產生真是的文件，行號也被正確映射，產生的開發資源也是最優的。

　　　　cheap-eval-source-map：每個模塊也是經過eval執行，但是只映射了行號沒有列，只顯示與eval類似的被轉換的代碼。

　　　　6.2 生產環境推薦使用：

　　　　none：不觸發sourcemap，性能最佳

　　　　source-map：會生成一個完整的sourceMap作為一個單獨的文件，為bundle添加了引用註釋，因此開發工作知道如何找到它。

　　　　hidden-source-map：與source-map類似，但不添加引用註釋。

　　7. devServer：方便前後端分離開發，一個本地服務

　　8. optimization：打包優化，可以實現提取公共代碼，代碼壓縮以及去除冗餘代碼等功能

三、常見問題

　　1. chunk和bundle的概念：chunk是一個代碼塊，在構建的時候會根據入口文件和依賴關係生成多個chunk，bundle是指最後生成的文件，包含所有的chunk和模塊

　　2. vue中的webpack是如何使用的：當前通過vue-cli腳手架創建的Vue項目都內置了webpack的打包功能，基本不需要獨立配置即可使用，如果更改配置項則需要在vue.config.js中配置

// 兩種方式自定義webpack配置
configureWebpack: {
    rules: [],
    plugins: []
},

configureWebpack: (config) => {
    config.devtool = 'source-map';
    config.plugins.push(***);
}

　　3. webpack的優缺點和其他組件(Vite)的對比：

　　　　優點：模塊化打包、零配置

　　　　缺點：隨著項目變大，模塊化增多，啟動時會逐漸變慢，熱更新也會變慢

　　　　Vite：由於打包原理和底層開發使用的語言不同，總體Vite打包和啟動都要比webpack快很多，但是Vite生態不完善。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • GMAC網卡Fixed-Link模式
    GMAC網卡Fixed-Link模式GMACfixed-link固定鏈接模式，mac與對端的連接方式是寫死的，通常用於mac to mac（不排除mac to phy的情況）。內核要支持fixed-link模式，需要打開CONFIG_FIXED_PHY配置。 社區版linux的gmac網卡platf ...
  • SQL FULL OUTER JOIN 關鍵字：左右表中所有記錄的全連接解析
    SQL RIGHT JOIN關鍵字 SQL RIGHT JOIN關鍵字返回右表（table2）中的所有記錄以及左表（table1）中的匹配記錄。如果沒有匹配，則左側的結果為0條記錄。 RIGHT JOIN語法 SELECT column_name(s) FROM table1 RIGHT JOIN ...
  • 3招解決時序數據高基數難題，性能多維度提升！
    本文分享自華為雲社區《DTSE Tech Talk | 3招解決時序數據高基數難題，性能多維度提升！》，作者：華為雲開源。 本期《openGemini全新列存引擎，為您解決時序數據高基數難題》的主題直播中，華為雲開源DTSE技術佈道師&資料庫創新Lab技術專家黃飛騰，與開發者朋友們分享了時序資料庫的 ...
  • 聊聊分散式 SQL 資料庫Doris(六)
    負載均衡 此處的負載均衡指的是FE層的負載均衡. 當部署多個 FE 節點時，用戶可以在多個 FE 之上部署負載均衡層來實現 Doris 的高可用。官方文檔描述: 負載均衡 。 實現方式 實現方式有多種，如下列舉。 開發者在應用層自己進行重試與負載均衡。 JDBC Connector 發現一個連接掛掉 ...
  • 聊聊分散式 SQL 資料庫Doris(五)
    閱讀 Doris SQL 原理解析，總結下Doris中SQL解析流程： 詞法識別：解析原始SQL文本，拆分token 語法識別：將token轉換成AST 單機邏輯查詢計劃：將AST經過一系列的優化（比如，謂詞下推等）成查詢計劃，提高執行性能與效率。 分散式邏輯查詢計劃：根據分散式環境（數據分佈信息、 ...
  • 帶你認識多模資料庫GeminiDB架構與應用實踐
    本文分享自華為雲社區《多模歸一，一生萬物——華為雲多模資料庫GeminiDB架構與應用實踐》，作者： GaussDB 資料庫 。 在這個信息爆炸的時代，數據的管理和應用變得越來越重要。互聯網用戶的規模化使得業務數據也呈現出多樣性，包括社交關係、系統日誌、Json、KV等。同時，越來越多的軟體開發團隊 ...
  • 從源碼分析 Redis 非同步刪除各個參數的具體作用
    以前對非同步刪除幾個參數的作用比較模糊，包括網上的很多資料都是一筆帶過，語焉不詳。 所以這次從源碼（基於 Redis 7.0.5）的角度來深入分析下這幾個參數的具體作用： lazyfree-lazy-user-del lazyfree-lazy-user-flush lazyfree-lazy-ser ...
  • 記錄--瀏覽器跨標簽星球火了，簡單探究一下實現原理
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、前言 最近 推特上 一位懂設計和寫代碼的大神一個兩個瀏覽器之間 星球粒子交互的動畫火了， 讓人看了大呼腦洞大開， 瀏覽器竟然還能這麼玩！！！ 準備自己也搞搞玩一下 二、實現 原作者的粒子動畫非常炫酷， 但是不是我們本文重點， 我們通過 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類