Webpack简介及打包演示

  1. Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容
    在这里插入图片描述

  2. 静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件

  3. 打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包

在这里插入图片描述

  1. Webpack 的作用：把静态模块内容，压缩，整合，转译等（前端工程化）

    • 把 less/sass 转成 css 代码
    • 把 ES6+ 降级成 ES5 等
    • 支持多种模块文件类型，多种模块标准语法

  2. 为何不学 vite？

    现在很多项目还是基于 Webpack 来进行构建的，所以还是要掌握 Webpack 的使用

  3. 体验 Webpack 打包 2 个 JS 文件内容

  4. 需求：封装 utils 包，校验手机号和验证码长度，在 src/index.js 中使用，使用 Webpack 打包

  5. 步骤：

    1. 新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件

      npm init -y

    2. 新建 src 源代码文件夹（书写代码）包括 utils/check.js 封装用户名和密码长度函数，引入到 src/index.js 进行使用

      • src/utils/check.js

        // 封装校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6

      • src/index.js

        /**
 * 目标1：体验 webpack 打包过程
 */
// 1.1 准备项目和源代码
import { checkPhone, checkCode } from '../utils/check.js'
console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))
// 1.2 准备 webpack 打包的环境
// 1.3 运行自定义命令打包观察效果（npm run 自定义命令）

    3. 下载 webpack webpack-cli 到项目（版本独立）

      npm i webpack webpack-cli --save-dev

      注意：虽然 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用

    在这里插入图片描述

    1. 项目中运行工具命令，采用自定义命令的方式（局部命令）

      npm run build

      npm run 自定义命令名字

      注意：实际上在终端运行的是 build 右侧的具体命名

    2. 自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

  6. 需求最终流程图：
    在这里插入图片描述
    执行完打包流程后，会在项目下生产dist/main.js

(()=>{"use strict";console.log(!0),console.log(!1)})();

这是编译完的结果，从index.js开始执行编译，调用对应的check方法，check方法所产生的结果已经展示在编译后的文件中，所以这两个check方法就不会再整合到dist文件中了。

Webpack 修改入口和出口

  1. 使用Webpack默认的打包入口路径是从./src/index.js开始的，打包后的文件默认输出位置为：./dist/main.js。

  2. Webpack 配置：影响 Webpack 打包过程

  3. 步骤：

    1. 项目根目录，新建 Webpack.config.js 配置文件

    2. 导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）

      const path = require('path')

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

    3. 重新打包就能发现效果

案例-用户登录-长度判断

目标

体验前端项目代码，如何被 Webpack 打包和使用

讲解

  1. 需求：点击登录按钮，判断手机号和验证码长度是否符合要求

  2. 步骤：

    1. 新建 public/login.html 准备网页模板（方便查找标签和后期自动生成 html 文件做准备）

      在这里插入图片描述

    2. 核心 JS 代码写在 src/login/index.js 文件

      /**
 * 目标3：用户登录-长度判断案例
 *  3.1 准备用户登录页面
 *  3.2 编写核心 JS 逻辑代码
 *  3.3 打包并手动复制网页到 dist 下，引入打包后的 js，运行
 */
// 3.2 编写核心 JS 逻辑代码
document.querySelector('.btn').addEventListener('click', () => {
  const phone = document.querySelector('.login-form [name=mobile]').value
  const code = document.querySelector('.login-form [name=code]').value

  if (!checkPhone(phone)) {
    console.log('手机号长度必须是11位')
    return
  }

  if (!checkCode(code)) {
    console.log('验证码长度必须是6位')
    return
  }

  console.log('提交到服务器登录...')
})

    3. 运行自定义命令，让 Webpack 打包 JS 代码

    4. 手动复制 public/login.html 到 dist 下，手动引入打包后的 JS 代码文件，运行 dist/login.html 在浏览器查看效果

小结

由于Webpack默认只会打包js资源，html并不会打包进入，生成的打包js会放在dist中，html要想调用打包后的js也需要放到dist文件夹中，并且通过<script>引入js。

Webpack 自动生成 html 文件

  1. 让 Webpack 拥有自动生成 html 文件能力，并引入打包后的其他资源

  2. 插件 html-webpack-plugin 作用：在 Webpack 打包时生成 html 文件，并引入其他打包后的资源

  3. 步骤：

    1. 下载 html-webpack-plugin 本地软件包到项目中

      npm i html-webpack-plugin --save-dev

    2. 配置 webpack.config.js 让 Webpack 拥有插件功能

      // ...
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/login.html', // 模板文件
      filename: './login/index.html' // 输出文件，在dist中
    })
  ]
}

    3. 指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源，所以在dist中自动生成的html文件中对js等资源的引用并不需要去修改。

  4. 运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

Webpack-打包 css 代码

  1. 注意：Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器

  2. 介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码

    • 加载器 css-loader：解析 css 代码
    • 加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

  3. 步骤：

    1. 准备 css 文件引入到 src/login/index.js 中（压缩转译处理等）

      /**
 * 目标5：打包 css 代码
 *  5.1 准备 css 代码，并引入到 js 中
 *  5.2 下载 css-loader 和 style-loader 本地软件包
 *  5.3 配置 webpack.config.js 让 Webpack 拥有该加载器功能
 *  5.4 打包后观察效果
 */
// 5.1 准备 css 代码，并引入到 js 中
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

      注意：这里只是引入代码内容让 Webpack 处理，不需定义变量接收在 JS 代码中继续使用，所以没有定义变量接收

    2. 下载 css-loader 和 style-loader 本地软件包

      npm i css-loader style-loader --save-dev

    3. 配置 webpack.config.js 让 Webpack 拥有该加载器功能

      // ...

module.exports = {
  // ...
  module: { // 加载器
    rules: [ // 规则列表
      {
        test: /\.css$/i, // 匹配 .css 结尾的文件
        use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM
      }
    ]
  }
};

    4. 打包后运行 dist/login/index.html 观察效果，看看准备好的样式是否作用在网页上，注意在dist中并不会直接生成css的文件，而是直接将样式效果加载到html代码中。

优化-提取 css 代码

让 Webpack 能够提取 css 代码到独立的 css 文件中

  1. 需求：让 webpack 把 css 代码内容字符串单独提取到 dist 下的 css 文件中

  2. 需要：mini-css-extract-plugin 插件来实现

  3. 步骤：

    1. 准备 css 文件引入到 src/login/index.js 中（压缩转译处理等）

      import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

    2. 下载 mini-css-extract-plugin 插件软件包到本地项目中

      npm i --save-dev mini-css-extract-plugin

    3. 配置 webpack.config.js 让 Webpack 拥有该插件功能

      // ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin()
  ]
};

    4. 打包后观察效果

    5. 注意：不能和 style-loader 一起使用

    6. 好处：css 文件可以被浏览器缓存，减少 JS 文件体积，让浏览器并行下载 css 和 js 文件

优化压缩过程

把单独提取的 css 文件内代码压缩

  1. 需求：把提出的 css 文件内样式代码压缩

  2. 需要：css-minimizer-webpack-plugin 插件来实现

  3. 步骤：

    1. 下载 mini-css-extract-plugin 插件软件包到本地项目中

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

    2. 配置 webpack.config.js 让 Webpack 拥有该插件功能

      // ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // ...
  // 优化
  optimization: {
    // 最小化
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 
      // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）
      `...`,
      new CssMinimizerPlugin(),
    ],
  }
};

    3. 打包后观察 css 文件内自己代码是否被压缩了

Webpack-打包 less 代码

让 Webpack 拥有打包 less 代码功能

  1. 加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包

  2. 步骤：

    1. 新建 login/index.less 文件，设置背景图样式（图片在配套资料-素材文件夹中）

      html {
  body {
    background: url('./assets/login-bg.png') no-repeat center/cover;
  }
}

    2. less 样式引入到 src/login/index.js 中

      /**
 * 目标8：打包 less 代码
 *  8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
 *  8.2 下载 less 和 less-loader 本地软件包
 *  8.3 配置 webpack.config.js 让 Webpack 拥有功能
 *  8.4 打包后观察效果
 */
// 8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
import './index.less'

    3. 下载 less 和 less-loader 本地软件包

      npm i less less-loader --save-dev

    4. 配置 webpack.config.js 让 Webpack 拥有功能

      // ...

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      }
    ]
  }
}

    5. 打包后运行 观察效果

Webpack-打包图片

让 Webpack 支持图片等资源打包

讲解

  1. 资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader

  2. 步骤：

    1. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

      占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

      占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

      占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）

    2. 注意：判断临界值默认为 8KB

      大于 8KB 文件：发送一个单独的文件并导出 URL 地址

      小于 8KB 文件：导出一个 data URI（base64字符串）

    3. 在 src/login/index.js 中给 img 标签添加 logo 图片

      /**
 * 目标9：打包资源模块（图片处理）
 *  9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
 *  9.2 打包后观察效果和区别
 */
// 9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
// 注意：js 中引入本地图片资源要用 import 方式（如果是网络图片http地址，字符串可以直接写）
import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

    4. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

      // ...

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ]
  }
}

    5. 打包后运行观察效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/106776.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

智慧巡查平台（Ionic/Vite/Vue3 移动端） 问题记录

智慧巡查平台（Ionic/Vite/Vue3 移动端） 问题记录

目录 1.环境搭建 1.1 安装 node 16 版本 1.2 安装 ionic7 1.3 创建 vue 项目 2.index.html 3.main.ts 3.1 如何默认使用 ios 样式&#xff1f; 3.2 如何使用 ElmentPlus 国际化&#xff1f; 4.router/xxx 5.打包二三事 5.1 添加打包相关文件 5.1.1 .env.developmen…
阅读更多...
linux下安装 Chrome 和 chromedriver 以及 selenium webdriver 使用

linux下安装 Chrome 和 chromedriver 以及 selenium webdriver 使用

1 安装 Chrome yum install https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm2 下载 chromedriver # 进入下载目录 cd soft/crawler_tools# 查看chrome 版本号 google-chrome --version# 在chromedriver下载地址中找到对应版本&#xff0c;下载对…
阅读更多...
yarn install 这个命令安装如何加速

yarn install 这个命令安装如何加速

yarn install 命令用来安装项目依赖&#xff0c;其速度受多种因素影响&#xff0c;如网络速度、npm/yarn包的源服务器、以及本地缓存等。以下是一些可能帮助你加速 yarn install 的方法&#xff1a; 1. 使用国内镜像 如果你在中国&#xff0c;可以使用淘宝的 npm 镜像&#x…
阅读更多...
Android 类似淘宝的吸顶特效 NestedScrollView+RecycleView

Android 类似淘宝的吸顶特效 NestedScrollView+RecycleView

运行图 布局的设计 要实现上面的效果需要搞定NestedScrollView和RecycleView的滑动冲突。有人要问RecycleView为何要滑动自动撑大不就好了么&#xff1f;这个问题其实对于有限的资源加载来说是很好的解决方案&#xff0c;但是如果涉及到的是图文结合的并且有大批量的数据的时候…
阅读更多...
Mac用NTFS文件夹读写NTFS硬盘 NTFS能复制多大的文件

Mac用NTFS文件夹读写NTFS硬盘 NTFS能复制多大的文件

Mac作为一款备受欢迎的计算机操作系统&#xff0c;具备了许多令人惊叹的功能和特性。然而&#xff0c;对于一些Mac用户来说&#xff0c;使用NTFS格式的硬盘可能存在一些疑问。他们可能想知道Mac是否能够读写NTFS格式的硬盘&#xff0c;以及NTFS格式的硬盘是否有文件大小的限制。…
阅读更多...
.\missyou-0.0.1-SNAPSHOT.jar中没有主清单属性

.\missyou-0.0.1-SNAPSHOT.jar中没有主清单属性

引用&#xff1a;https://blog.csdn.net/marypiglwy/article/details/132016171 配置的时候 <skip>true</skip> skip设置为true&#xff0c;跳过了执行插件&#xff0c;&#xff0c; <plugin><groupId>org.springframework.boot</groupId><a…
阅读更多...
如何使用手机蓝牙设备作为电脑的解锁工具像动态锁那样，蓝牙接近了电脑，电脑自动解锁无需输入开机密码

如何使用手机蓝牙设备作为电脑的解锁工具像动态锁那样，蓝牙接近了电脑，电脑自动解锁无需输入开机密码

环境&#xff1a; Win10 专业版 远程解锁 蓝牙解锁小程序 问题描述&#xff1a; 如何使用手机蓝牙设备作为电脑的解锁工具像动态锁那样&#xff0c;蓝牙接近了电脑&#xff0c;电脑自动解锁无需输入开机密码 手机不需要拿出来&#xff0c;在口袋里就可以自动解锁&#xff…
阅读更多...
vscode json文件添加注释报错

vscode json文件添加注释报错

在vscode中创建json文件&#xff0c;想要注释一波时&#xff0c;发现报了个错&#xff1a;Comments are not permitted in JSON. (521)&#xff0c;意思是JSON中不允许注释 以下为解决方法&#xff1a; 在vscode的右下角中找到这个&#xff0c;点击 在出现的弹窗中输入json wit…
阅读更多...
【Mybatis源码】XMLConfigBuilder构建器 - 读取XML配置初始化Configuration对象

【Mybatis源码】XMLConfigBuilder构建器 - 读取XML配置初始化Configuration对象

XMLConfigBuilder是Mybatis中定义的进行构建Configuration对象的类，此类用于读取XML配置文件创建并初始化Configuration对象； 上一篇中我们介绍了XMLConfigBuilder构建器加载XML配置文件以及创建Configuration对象https://blog.csdn.net/m1729339749/article/details/133983…
阅读更多...
Linux shell编程学习笔记16：bash中的关联数组

Linux shell编程学习笔记16：bash中的关联数组

上一节我们探讨了普通的数组&#xff0c;即使用数字下标来索引数组中不同的元素的数组&#xff0c;也可以称之为索引数组。 相比纯粹的数字&#xff0c;字符串不仅能表明含义&#xff0c;也更便于记忆使用&#xff0c;于是就有了关联数组。 一、关联数组概述 bash 从4.0开始支…
阅读更多...
【Linux】部署单机OA项目及搭建spa前后端分离项目

【Linux】部署单机OA项目及搭建spa前后端分离项目

目录 部署OA项目 ​编辑 搭建spa前后端分离项目 后端 前端 配置坏境变量 部署OA项目 在虚拟机中&#xff0c;将项目打包成war文件放置到tomcat根目录下的webapps文件目录下 再在主机数据库中连接数据库&#xff0c;并定义数据库名导入相关的表 继续进入tomcat目录下双击点…
阅读更多...
香港服务器运行不正常原因简析

香港服务器运行不正常原因简析

​　　网站在线业务的部署需要服务器的存在。于我们而言&#xff0c;租用正规服务商(正规机房)的服务器&#xff0c;一般情况下是会很少出现问题。但&#xff0c;要知道&#xff0c;再稳定的服务器也有出现问题的时候&#xff0c;香港服务器也不例外&#xff0c;而且恰恰这个原…
阅读更多...
Windows-Oracle19c 安装详解-含Navicate远程连接配置 - 同时连接Oracle11g和Oracle19c

Windows-Oracle19c 安装详解-含Navicate远程连接配置 - 同时连接Oracle11g和Oracle19c

文章目录 0 说明1 下载链接2 安装&#xff1a;一定要以管理员身份运行&#xff0c;不然后面有可能会报错。3 启动监听4. 登录Oracle4 Navicate远程连接-配置监听4.1 修改监听文件4.2 网络配置助手-配置本地监听端口4.3 Navicate连接成功 5 Navicate同时连接两个Oracle数据库 0 …
阅读更多...
SpringBoot 自动配置@EnableAutoConfiguration

SpringBoot 自动配置@EnableAutoConfiguration

自动配置vs自动装配 Spring有两个名字听起来相似的概念&#xff1a;一个是自动装配&#xff0c;一个是自动配置。他们两个只是听起来相似&#xff0c;实际根本不同。自动装配是autowire&#xff0c;自动配置是autoconfiguration&#xff0c;他们之间没有任何关系&#xff0c;概…
阅读更多...
科聪协作（复合）移动机器人整体解决方案

科聪协作（复合）移动机器人整体解决方案

协作&#xff08;复合&#xff09;移动机器人&#xff08;AGV/AMR&#xff09;相较传统工业机器人具有更加安全和简单的工作优势&#xff0c;具备较强的发展潜力。协作&#xff08;复合&#xff09;移动机器人安全性和操作的简洁性、灵活性不断提高,优势得到了充分发挥,在越来越…
阅读更多...
如何为3D模型设置自发光材质？

如何为3D模型设置自发光材质？

1、自发光贴图的原理 自发光贴图是一种纹理贴图&#xff0c;用于模拟物体自发光的效果。其原理基于光的发射和反射过程。 在真实世界中&#xff0c;物体自发光通常是由于其本身具有能够产生光的属性&#xff0c;如荧光物质、发光材料或光源本身。为了在计算机图形中模拟这种效…
阅读更多...
electron27+react18集成搭建跨平台应用|electron窗口多开

electron27+react18集成搭建跨平台应用|electron窗口多开

基于Electron27集成React18创建一个桌面端exe程序。 electron27-vite4-react18基于electron27结合vite4构建工具快速创建react18跨端应用实践。 版本列表 "vite": "^4.4.5" "react": "^18.2.0" "electron": "^27.0.1&…
阅读更多...
【MyBatis Plus】深入探索 MyBatis Plus 的条件构造器，自定义 SQL语句，Service 接口的实现

【MyBatis Plus】深入探索 MyBatis Plus 的条件构造器，自定义 SQL语句，Service 接口的实现

文章目录 前言一、条件构造器1.1 什么是条件构造器1.2 QueryWrapper1.3 UpdateWrapper1.4 LambdaWrapper 二、自定义 SQL 语句2.1 自定义 SQL 的基本用法2.2 自定义 SQL 实现多表查询 三、Service 接口3.1 对 Service 接口的认识3.2 实现 Service 接口3.3 实现增删改查功能3.4 …
阅读更多...
HarmonyOS开发：探索组件化模式开发

HarmonyOS开发：探索组件化模式开发

前言 组件化一直是移动端比较流行的开发方式&#xff0c;有着编译运行快&#xff0c;业务逻辑分明&#xff0c;任务划分清晰等优点&#xff0c;针对Android端的组件化&#xff0c;之前有比较系统的总结过相关文章&#xff0c;感兴趣的朋友&#xff0c;可以查看&#xff0c;点击…
阅读更多...
java集成海康预览抓图出现内存一直上涨问题

java集成海康预览抓图出现内存一直上涨问题

求助&#xff1a;在java 中集成海康sdk后批量抓图出现内存上涨问题&#xff0c;不论是预览后不关闭继续预览&#xff0c;还是预览后关闭预览&#xff0c;然后重新预览都没有解决这个问题&#xff08;抓图正常&#xff09;&#xff0c;尝试使用第三方解码器ffmpeg来进行解码&…
阅读更多...
最新文章

Copyright @ 2022~2023