Webpack基本用法学习总结

发布于：2025-05-10 ⋅ 阅读:(12) ⋅ 点赞:(0)

Webpack

基本使用

  • webpack是一个静态资源打包工具
  • 他会以一个或者多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或者多个文件输出出去
  • 输出的文件就是编译好的文件，就可以在浏览器中运行了
  • 我们将webpack输出的文件叫做bundle

核心概念

  • entry（入口）：指示Webpack从哪个文件开始打包
  • output（输出）：指示Webpack打包完的文件输出到哪里去，如何命名等
  • loader（加载器）：webpack本身只能处理js、json等资源，其他资源需要借助loader、webpack才能解析
  • plugins（插件）：扩展webpack的功能
  • mode（模式）：
    • 开发模式：development
    • 生产模式：production
  • 开发服务器：devServer

处理样式资源

  • webpack本身是不能识别样式资源的，所以我们需要借助Loader来帮助Webpack解析样式资源

步骤：

  1. 安装相应的loader
  2. 在webpack.config.js中进行配置
  3. npx webpack进行打包即可

处理图片资源

  • 将小于10kb的图片转为base64编码格式
 //处理图片资源
      {
        test: /\.(png|jpg|gif|jpeg|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, //小于10kb的图片，会被base64处理
          },
        },
      },

修改图片输出文件目录

  • 添加generator属性
 //处理图片资源
      {
        test: /\.(png|jpg|gif|jpeg|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, //小于10kb的图片，会被base64处理
          },
        },
        generator: {
          //输出图片名称
          filename: "static/images/[hash][ext][query]",
        },
      },

自动清空上次打包的内容

  • 在output中的clean属性设置为true

Eslint

  • 可组装的Javascript和JSX检查工具
  • 它是用来检测js和jsx语法的工具，可以配置各项功能

Babel

  • JavaScript编译器
  • 主要用于将ES6编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或者其他环境中

处理HTML资源

  • Defer的作用：在 HTML 中，

搭建开发服务器

  • 自动化：devServer
  • 在webpack.config.js中进行配置
  //开发服务器
  devServer:{
    host:"localhost", //启动服务器域名
    port:"3000", //启动服务器端口
    open:true // 是否自动打开浏览器
  },

生产模式

  • 生产模式是开发完成代码后，我们需要得到代码将来部署上线
  • 这个模式下我们主要对代码进行优化，让其运行性能更好，优化主要从两个角度出发：
    • 优化代码运行性能
    • 优化代码打包速度

提取css文件为单独文件

  • css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式
  • 这样对于网站来说会出现闪屏现象，用户体验不好
  • 我们应该是单独的css文件，通过link标签加载性能更好
  • 使用下面的插件
    mini-css-extract-plugin

问题：

  1. 为什么通过style标签加载css会出现闪屏现象，但是通过link标签则不会呢
  2. 当您通过

Css压缩

npm install css-minimizer-webpack-plugin --save-dev

HTML压缩

  • 默认生产模式已经开启了：HTML压缩和js压缩

小结1

在这里插入图片描述

高级

  • 所谓高级配置其实就是进行Webpack优化，让我们代码在编译/运行时性能更好

SourceMap

  • SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。
  • 作用：它会生成一个xxx.map文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过xxx.map文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源

开发模式

  • cheap-module-source-map
  • 优点：打包编译速度快，只包含行映射
  • 缺点：没有列映射
module.exports = {
    mode:"development",
    devtool:"cheap-module-source-map"
}

生产模式

  • source-map
  • 优点：包含行/列映射
  • 缺点：打包编译速度更慢
module.exports = {
    mode:"production",
    devtool:"source-map"

HMR

  • 全称：HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或者删除模块，而无需重新加载整个页面

OneOf

  • 为什么：打包时每个文件都会经过所有loader处理，虽然因为test正则原因实际没有处理上，但是都要过一遍，比较慢
  • 是什么：顾名思义就是只能匹配上一个loader，剩下的就不匹配了

Include/Exclude

  • 为什么：开发时我们需要使用第三方库和插件，所有文件都下载到node-modules中了，而这些文件是不需要编译可以直接使用的，所以我们在对js文件处理时，要排除node-modules下面的文件
  • 是什么：
    • include：包含，只处理xxx文件
    • exclude：排除，除了xxx文件以外其他文件都处理

Cache

  • 为什么：每次打包时js文件都要经过Eslint检查和Babel编译，速度比较慢。我们可以缓存之前的Eslint检查和Babel编译结果，这样第二次打包时速度就会更快了。
  • 是什么：对Eslint检查和Babel编译结果进行缓存

Thead

  • 为什么：当项目越来越大时，打包速度越来越慢。我们想要继续提升打包速度，其实就是要提升js的打包速度，因为其他文件都比较少。而对js文件处理主要就是eslint、babel、Terser三个工具，所以我们要提升他们的运行速度，我们可以开启多进程同时处理js文件，这样速度就比之前的单进程打包更快了
  • 是什么：多进程打包：开启电脑的多个进程同时干一件事，速度更快。
    需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约为600ms左右的开销。

Tree Shaking

  • 用来减少代码体积
  • 为什么：开发时我们定义了一些工具函数库，或者引用第三方工具函数库或者组件库。如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。这样将整个库都打包进来，体积就太大了。
  • 是什么：Tree Shaking是一个术语，通常用于描述移除Javascript中的没有使用上的代码。
    注意：它依赖ES Module
    生产模式下自动开启了这个功能

Babel

  • Babel-runtime

压缩图片

  • 开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。我们可以对图片进行压缩，减少图片体积。
    注意：如果项目中图片都是在线链接，那么就不需要了，本地项目静态图片才需要进行压缩。
  • 插件：image-minimizer-webpack-plugin

Code Split

  • 作用：优化代码运行性能
  • 为什么：打包代码时会将所有js文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的js文件，其他文件不应该加载
    • 所以我们需要将打包生成的文件进行代码分割，生成多个js文件，渲染哪个页面就只加载某个js文件，这样加载的资源越少，速度就更快。
  • 是什么：代码分割，主要做了两件事
    • 分割文件：将打包生成的文件进行分割，生成多个js文件。
    • 按需加载：需要哪个文件就加载哪个文件

多入口

  • 有多个入口文件就是多入口
  • 打包后会生成多个文件
 entry: {
    //有多个入口文件：多入口
    main: "./src/main.js",
    app: "./src/app.js",
  },

按需加载

  1. 可以使用import的动态导入，会将动态导入的文件代码分割（拆分成单独模块），在需要使用的时候自动加载。
  2. 返回值是一个promise对象
//动态import
const btn = document.getElementsByClassName("btm");
btn[0].addEventListener("click", () => {
  import("./count.js")
    .then((res) => {
      console.log(res.default(1, 6));
    })
    .catch((err) => {
      console.log(err);
    });
});

Preload / Prefetch

  • 为什么：前面已经做了代码分割，同时会使用import动态导入语法来进行代码按需加载（也叫懒加载，比如路由懒加载就是这样实现的）。但是加载速度还不够好，比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果。我们想在浏览器空闲时间，加载后续需要使用的资源，我们就需要用上preload和prefetch技术。
  • 是什么：
    • Preload：告诉浏览器立即加载资源
    • Prefetch：告诉浏览器在空闲时才开始加载资源
  • 共同点：
    • 都只会加载资源，并不执行。
    • 都有缓存
  • 区别：
    • Preload加载优先级高，Prefetch加载优先级低
    • Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源
  • 总结：
    • 当前页面优先级高的资源用Preload加载。
    • 下一个页面需要使用的资源用Prefetch加载。

Core-js

  • 为什么：babel对js代码的兼容性处理不能做到面面俱到，一旦遇到低版本浏览器会直接报错，所以我们想要将js兼容性问题彻底解决
  • 是什么：core-js是专门用来做ES6以及以上API的polyfill。polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。
  • 完整引入：import 'core-js'
  • 按需加载：import "core-js/es/promise"

PWA

  • 为什么：开发Web App项目，项目一旦处于网络离线情况，就没法访问了。
  • 是什么：渐进式网络应用程序（progressive web application），是一种可以提供类似于native app（原生应用程序）体验的Web App的技术。其中最重要的是，在离线时应用程序能够继续运行功能。内部通过Service Workers技术实现

总结

在这里插入图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布