學習 Webpack5 之路（基礎篇）｜ 8月更文挑戰

前言

對我來講，掌握一個工具最好的方式，就是在學習的過程當中，總結並記錄，嘗試把本身學到的東西進行表達並分享，在分享的過程當中，找到一個個同行的小夥伴，一塊兒交流、學習，感覺到學習技術的簡單和純粹。

《學習 Webpack5 之路》系列文章，標題靈感來自朴樹的《平凡之路》，一直渴望一場走到東極島的公路旅行，或許學習之路也能和平凡之路同樣，讓我得到知足和快樂。

《學習 Webpack5 之路》系列文章將分爲如下 4 個系列，敬請期待：

• 基礎篇
• 實踐篇
• 優化篇
• 原理篇

本文依賴的 webpack 版本信息以下：

• webpack-cli@4.7.2
• webpack@5.46.0

1、Webpack 是什麼

引入 webpack 官網 介紹：

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler) 。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph) ，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

webpack 官網 圖：

在圖中咱們能夠看到，webpack 將左側錯綜複雜的各自不一樣類型文件的模板依賴關係，包括 .js、.hbs、.cjs、.sass、.jpg、.png 等類型文件，打包成 .js、.css、.jpg、.png 4 種類型的靜態資源。

簡單來講，webpack 就是一個靜態資源打包工具，負責將項目中依賴的各個模塊，打包成一個或多個文件。

2、爲何選擇 Webpack

本文不進行其餘打包工具和 webpack 的優劣對比，僅介紹 webpack 能爲開發者作的工做。

1. 模塊化開發

在沒有各個 webpack 搭建的腳手架（create-react-app、vue-cli 等等）以前，咱們經過在 HTML5 文件裏引入一個個 Javascript 文件來進行開發，這就可能致使並行請求數量過多、存在重複代碼等問題。

而經過 webpack，咱們可使用 import、require 來進行模塊化開發。

在 webpack 中一切皆模塊，js、css、圖片、字體都是模塊，並且支持靜態解析、按需打包、動態加載、代碼分離等功能，幫助咱們優化代碼，提高性能。

import { Hello } from './hello.js'
import './assets/style.css'
import MyImage './assets/img.jpg'
複製代碼

2. 新語法

Javascript、CSS 的語法規範在不斷更新，可是瀏覽器的兼容性卻不能同步的更新，開發者能夠經過 webpack 預處理器進行編譯，自由的使用 JS、CSS 等語言的新語法。

webpack 使用 loader 對文件進行預處理。你能夠構建包括 JavaScript 在內的任何靜態資源，如 Less、Sass、ES六、TypeScript。

經過預處理器將 TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS、ES6 編譯成 ES5 等。

開發者還可使用 Node.js 輕鬆編寫本身的 loader。

經常使用預處理器：

• babel-loader 使用 Babel 加載 ES2015+ 代碼並將其轉換爲 ES5；
• less-loader 加載並編譯 LESS 文件；
• sass-loader 加載並編譯 SASS/SCSS 文件；
• postcss-loader 使用 PostCSS 加載並轉換 CSS/SSS 文件。

3. 主流框架腳手架

Vue 腳手架 vue-cli、React 腳手架 creact-react-app、Taro 腳手架 taro-cli 都是使用 webpack，開發者掌握 webpack 後，能夠自由配置腳手架，根據項目須要，調整 webpack 配置，以提升項目性能。

4. 其餘

webpack 除了讓開發者可以擁有【模塊化開發+新語言+新框架】的開發體驗。

還有如下優勢：

• 擁有依賴管理、動態打包、代碼分離、按需加載、代碼壓縮、靜態資源壓縮、緩存等配置；
• webpack 擴展性強，插件機制完善，開發者可自定義插件、loader；
• webpack 社區龐大，更新速度快，輪子豐富；

如使用 ant-design 搭建的中後臺項目，ant-desgin 提供了 webpack 定製主題的相關文檔，較其餘打包工具定製起來就簡單不少，易上手。

由於 webpack 的這些優勢，大部分的大型項目會選擇 webpack 進行項目構建。

3、Webpack 的基本概念介紹

1. dependency graph（依賴圖）

上文有提到，當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，那麼依賴關係圖是什麼呢？

依賴圖指的就是文件和文件直接的依賴關係，如上文引入過的圖：

webpack 經過依賴關係圖能夠獲取非代碼資源，如 images 或 web 字體等。並會把它們做爲 依賴 提供給應用程序。

每一個模塊均可以明確表述它自身的依賴，在打包時可根據依賴進行打包，避免打包未使用的模塊。

2. entry（入口）

入口是指依賴關係圖的開始，從入口開始尋找依賴，打包構建。

webpack 容許一個或多個入口配置。

配置示例以下：

module.exports = {
  entry: 'index.js',
};
複製代碼

3. output（輸出）

輸出則是用於配置 webpack 構建打包的出口，如打包的位置，打包的文件名等等。

配置示例以下：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};
複製代碼

4. loader

webpack 自帶 JavaScript 和 JSON 文件的打包構建能力，無需格外配置。

而其餘類型的文件，如 CSS、TypeScript，則須要安裝 loader 來進行處理。

loader 讓 webpack 可以去處理其餘類型的文件，並將它們轉換爲有效 模塊，以供應用程序使用，以及被添加到依賴圖中。

配置示例以下：

module.exports = {
  module: {
    rules: [{ test: /.txt$/, use: 'raw-loader' }],
  },
};
複製代碼

5. plugin（插件）

插件則是用於擴展 webpack 的能力，常見的插件有：

• ProgressBarPlugin：編譯進度條；
• BundleAnalyzerPlugin：打包體積分析；
• MiniCssExtractPlugin：提取 CSS 到獨立 bundle 文件。

配置示例以下：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝

module.exports = {
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
複製代碼

插件豐富，開發者社區一樣提供了大量插件，也使得 webpack 的可用功能更加多樣。

6. mode（模式）

webpack5 提供了模式選擇，包括開發模式、生產模式、空模式，並對不一樣模式作了對應的內置優化。可經過配置模式讓項目性能更優。

配置示例以下：

module.exports = {
  mode: 'development',
};
複製代碼

7. resolve（解析）

resolve 用於設置模塊如何解析，經常使用配置以下：

• alias：配置別名，簡化模塊引入；
• extensions：在引入模塊時可不帶後綴；
• symlinks：用於配置 npm link 是否生效，禁用可提高編譯速度。

配置示例以下：

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.d.ts'],
        alias: {
          '@': paths.appSrc,
        },
        symlinks: false,
      }
}
複製代碼

8. optimization（優化）

optimization 用於自定義 webpack 的內置優化配置，通常用於生產模式提高性能，經常使用配置項以下：

• minimize：是否須要壓縮 bundle；
• minimizer：配置壓縮工具，如 TerserPlugin、OptimizeCSSAssetsPlugin；
• splitChunks：拆分 bundle；
• runtimeChunk：是否須要將全部生成 chunk 之間共享的運行時文件拆分出來。

配置示例以下：

module.exports = {
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可使用 `...` 語法來擴展示有的 minimizer（即 `terser-webpack-plugin`），將下一行取消註釋
      // `...`,
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
      // 重複打包問題
      cacheGroups:{
        vendors:{ //node_modules裏的代碼
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          name: 'vendors', //chunks name
          priority: 10, //優先級
          enforce: true 
        }
      }
    },
  },
}
複製代碼

以上對 webpack 的基本概念作了簡單的介紹，爲後續實踐篇作準備。

4、總結

本文從 webpack 是什麼、爲何選擇 webpack、webpack的基本概念介紹 3個角度進行講述，從 Webpack 基礎着手，和你一塊兒瞭解 webpack。

《學習 Webpack5 之路》系列文章將分爲如下 4 個系列：

• 基礎篇
• 實踐篇
• 優化篇
• 原理篇

下一篇《學習 Webpack5 之路（實踐篇）》將從實踐出發，一塊兒完成一個比較完整的 webpack 配置，敬請期待。

本文源碼：webpack Demo0

但願能對你有所幫助，感謝閱讀～

別忘了點個贊鼓勵一下我哦，筆芯❤️

往期精彩

• 學習 Webpack5 之路（實踐篇）

參考資料

• webpack.docschina.org/