Skip to main content

introduction

id: introduction title: 简介 tags:

  • 简介

Webpack 是一个前端资源加载/打包工具。根据模块的依赖关系进行分析，然后将这些模块按照指定的规则生成对应的静态资源。

webpack4 和 webpack5 的主要区别​

Webpack5是Webpack4的升级版，它们之间的主要区别包括以下几个方面：

  • 性能优化：Webpack5在性能方面做了一些优化，例如通过持久化缓存来加快二次构建的速度，通过改进Tree Shaking算法来减小打包后的文件大小等。
  • Tree Shaking：Webpack5在Tree Shaking方面进行了一些优化，它通过引入“sideEffects”属性来让开发者标识哪些文件没有副作用，以便在Tree Shaking时可以更加精确地删除无用的代码。
  • 模块联邦：Webpack5引入了模块联邦（Module Federation）的功能，使得不同的Webpack构建之间可以共享模块，从而提高了应用程序的可扩展性和灵活性。
  • Chunk 分离：Webpack5通过引入新的“chunk format”来实现对Chunk的更加灵活的分离，从而提高了构建的速度和效率。
  • 配置变更：Webpack5在配置方面也做了一些调整，例如废弃了“mode”配置项中的“none”选项，引入了“cache”配置项来配置持久化缓存等。
  • 总的来说，Webpack5相对于Webpack4来说更加高效、灵活和易用，提供了更多的性能优化和功能扩展，使得开发者能够更加便捷地构建和维护现代化的Web应用程序。

文档展示的工具版本是​

webpack@4
webpack-cli@3

webpack 各主要版本区别

同类型工具 (打包工具大战)

工具名备注网址github地址
Browserifyhttps://browserify.org/github
Grunthttp://www.gruntjs.net/github
Gulphttps://www.gulpjs.com.cn/github
parcelhttps://www.parceljs.cn/github
rolluphttps://www.rollupjs.com/github
snowpackhttps://www.snowpack.dev/github
vitehttps://cn.vitest.dev/github
…………

PWA(Progressive Web Application)​

npm i workbox-webpack-plugin -D

// webpack.config.js

const WorkboxPlugin = require('workbox-webpack-plugin');


{
  plugins: [
    // …………
    new WorkboxPlugin.GenerateSW({
      clientsClaim:true,
      skipWaiting: true,
    })
  ]
}
if(('serviceWorker'in navigator)){
window.addEventListener('load', () => {
  navigator.serviceWorker.register('./service-worker.js').then(((registration) => {

  }).catch(error => {

  })
})
}

概念的简要说明​

  • libray 库文件

  • module、chunk、bundle 三个概念的简要说明

    • 模块（Module）：在 webpack 中，每一个 JavaScript 文件都被视为一个模块。这个模块可以包含各种类型的代码（例如 ES6 模块、CommonJS 模块、AMD 模块等等），以及 CSS、图片、字体等资源文件。模块可以依赖其他模块，并且可以通过 import 或 require 语句来引用其他模块。
    • 块（Chunk）：块是 webpack 中的一个概念，表示一组相互依赖的模块。在 webpack 中，每当遇到一个入口模块时，就会从这个入口模块开始，分析它所依赖的所有模块，将它们打包成一个或多个块。块中可以包含多个模块，也可以包含其他块。
    • 打包文件（Bundle）：在 webpack 中，打包文件是指 webpack 最终生成的文件。它是由一个或多个块组成的，可以是 JavaScript 文件、CSS 文件、图片文件等等。打包文件可以在浏览器中被加载和执行，从而呈现出网页的样式和功能。