webpack打包模块

news2024/11/24 8:56:39

webpack打包模块

  • 一.webpack简介
  • 二.Webpack 修改入口和出口
  • 三.Webpack 自动生成 html 文件
  • 四.Webpack-打包 css 代码
  • 五.优化-提取 css 代码
  • 六.优化压缩过程
  • 七.Webpack-打包图片

一.webpack简介

1.Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容
2. 静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件
3. 打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包
4. Webpack 的作用：把静态模块内容，压缩，这个和，转译等（前端工程化）

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

体验 Webpack 打包 2 个 JS 文件内容
需求：封装 utils 包，校验手机号和验证码长度，在 src/index.js 中使用，使用 Webpack 打包
步骤：
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.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 自定义命令，作为局部命令使用（“build”:“webpack”）
在这里插入图片描述
4.项目中运行工具命令，采用自定义命令的方式（局部命令）

npm run build

npm run 自定义命令名字
注意：实际上在终端运行的是 build 右侧的具体命名

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

流程图：
在这里插入图片描述

二.Webpack 修改入口和出口

1 Webpack 配置：影响 Webpack 打包过程
2.步骤：
项目根目录，新建 Webpack.config.js 配置文件
导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）

const path = require('path')

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

重新打包观察

图解：
在这里插入图片描述

三.Webpack 自动生成 html 文件

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

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

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

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

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

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

指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源(这里自动引入了dist下的index.js)
运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

四.Webpack-打包 css 代码

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

2.介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码
加载器 css-loader：解析 css 代码
加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

3.步骤：

准备 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'

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

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

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

 // ...

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

打包后运行 dist/login/index.html 观察效果，看看准备好的样式是否作用在网页上

五.优化-提取 css 代码

让 webpack 把 css 代码内容字符串单独提取到 dist 下的 css 文件中
需要：mini-css-extract-plugin 插件来实现
步骤：
1.下载 mini-css-extract-plugin 插件软件包到本地项目中

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

2.配置 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()
  ]
};

3.打包后观察效果
4.注意：不能和 style-loader 一起使用
5.好处：css 文件可以被浏览器缓存，减少 JS 文件体积，让浏览器并行下载 css 和 js 文件

六.优化压缩过程

1.需求：把提出的 css 文件内样式代码压缩
2.需要：css-minimizer-webpack-plugin 插件来实现
3.步骤：
下载 mini-css-extract-plugin 插件软件包到本地项目中

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

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

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

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

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

七.Webpack-打包图片

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

2.步骤：
配置 webpack.config.js 让 Webpack 拥有打包图片功能
占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串
占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）
注意：判断临界值默认为 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]'
        }
      }
    ]
  }
}

总结：在使用包或插件时，一般是先用npm命令下载，再在webpack.config.js中配置，最后再使用也就是开始进行打包。
具体使用应查看官方文档。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

使用MySQL和PHP创建一个公告板

使用MySQL和PHP创建一个公告板

目录 一、创建表 二、制作首页（创建主题以及显示列表） 三、制作各个主题的页面（输入回帖和显示列表） 四、制作消息的查询界面 五、制作读取数据库信息的原始文件 六、制作数据重置页面 七、效果图 八、问题 1、目前无法处…
阅读更多...
LLM大语言模型（八）：ChatGLM3-6B使用的tokenizer模型BAAI/bge-large-zh-v1.5

LLM大语言模型（八）：ChatGLM3-6B使用的tokenizer模型BAAI/bge-large-zh-v1.5

背景 BGE embedding系列模型是由智源研究院研发的中文版文本表示模型。 可将任意文本映射为低维稠密向量，以用于检索、分类、聚类或语义匹配等任务，并可支持为大模型调用外部知识。 BAAI/BGE embedding系列模型 模型列表 ModelLanguageDescriptionq…
阅读更多...
python实战之宝塔部署flask项目

python实战之宝塔部署flask项目

一. 项目 这个demo只是提供了简单的几个api接口, 并没有前端页面 # -*- coding: utf-8 -*- import flask as fk from flask import jsonify, requestapp fk.Flask(__name__)app.route(/api/hello, methods[GET]) def get_data():return hello world# 假设我们要提供一个获取用…
阅读更多...
练习3-2 计算符号函数的值

练习3-2 计算符号函数的值

对于任一整数n，符号函数sign(n)的定义如下： 请编写程序计算该函数对任一输入整数的值。 输入格式: 输入在一行中给出整数n。 输出格式: 在一行中按照格式“sign(n) 函数值”输出该整数n对应的函数值。 输入样例1: 10输出样例1: sign(10) 1输入样…
阅读更多...
PyQt6实战4-Terminal

PyQt6实战4-Terminal

实现一个简单的终端执行器 功能： 执行命令 显示结果 效果： 代码： from PyQt6.QtWidgets import * from PyQt6.QtCore import * from PyQt6.QtGui import * import sys import subprocessclass JTerminal(QMainWindow):def __init__(self, …
阅读更多...
【Django开发】前后端分离美多商城项目第4篇：用户部分,1. 判断用户名是否存在【附代码文档】

【Django开发】前后端分离美多商城项目第4篇：用户部分,1. 判断用户名是否存在【附代码文档】

美多商城项目4.0文档完整教程（附代码资料）主要内容讲述：美多商城，项目准备1.B2B--企业对企业,2.C2C--个人对个人,3.B2C--企业对个人,4.C2B--个人对企业,5.O2O--线上到线下,6.F2C--工厂到个人。项目准备，配置1. 修改set…
阅读更多...
UniFace：深度人脸识别的统一交叉熵损失

UniFace：深度人脸识别的统一交叉熵损失

UniFace: Unified Cross-Entropy Loss for Deep Face Recognition softmax损失 缺点：不能保证最小正样本类相似度大于最大负样本类相似度 问题：没有统一的阈值可用于将正样本与类对与负样本与类对分开 创新点 设计了用于人脸识别模型训练的UCE&#xf…
阅读更多...
1695. 删除子数组的最大得分-力扣（滑动窗口）

1695. 删除子数组的最大得分-力扣（滑动窗口）

给你一个正整数数组 nums ，请你从中删除一个含有 若干不同元素 的子数组。删除子数组的 得分 就是子数组各元素之 和 。 返回 只删除一个 子数组可获得的 最大得分 。 如果数组 b 是数组 a 的一个连续子序列，即如果它等于 a[l],a[l1],…,a[r] &#xff0…
阅读更多...
T-Dongle-S3开发笔记——idf事件

T-Dongle-S3开发笔记——idf事件

参考事件循环库 - ESP32 - — ESP-IDF 编程指南 v5.2 文档 (espressif.com) 事件标识符由两部分组成：事件根基 和 事件 ID。 事件根基标识独立的事件组； 事件 ID 标识组中的特定事件。 默认事件循环 默认事件循环是一种特殊循环，用于处理…
阅读更多...
练习所学文件操作的相关函数

练习所学文件操作的相关函数

上上篇文章，我们介绍了文件和文件操作函数，现在我们来练习一下所学文件操作的相关函数吧！ 实践出真知~ 文件的打开和关闭 我们首先练习一下文件的打开和关闭： 每个被使⽤的⽂件都在内存中开辟了⼀个相应的⽂件信息区&#xff…
阅读更多...
数据结构(六)——图的遍历

数据结构(六)——图的遍历

6.3 图的遍历 6.3.1 图的广度优先遍历 ⼴度优先遍历（Breadth-First-Search, BFS）要点： 1. 找到与⼀个顶点相邻的所有顶点 2. 标记哪些顶点被访问过 3. 需要⼀个辅助队 FirstNeighbor(G,x)：求图G中顶点x的第⼀个邻接点&#xff…
阅读更多...
Windows 11 专业版 23H2 Docker Desktop 下载 安装 配置 使用

Windows 11 专业版 23H2 Docker Desktop 下载 安装 配置 使用

博文目录 文章目录 Docker Desktop准备系统要求 (WSL 2 backend)在 Windows 上打开 WSL 2 功能先决条件开启 WSL 2 WSL下载安装启动配置使用镜像 Image卷积 Volumes容器 Containers 命令RedisMySQLPostGreSQL Docker Desktop Overview of Docker Desktop Docker Desktop 疑难解…
阅读更多...
SSTI 服务器端模板注入（Server-Side Template Injection）

SSTI 服务器端模板注入（Server-Side Template Injection）

1.Web_python_template_injection {{}}是变量包裹标识符，里面存放的是一个变量，当你输入 http://61.147.171.105:55121/{{8*8}} 执行成功，说明存在模版注入。接下来，开始想办法编代码拿到服务器的控制台权限 。 首先&#xff0c…
阅读更多...
用于网站域名备案的服务器最便宜多少钱？30元备案5个网站

用于网站域名备案的服务器最便宜多少钱？30元备案5个网站

用于备案的服务器多少钱？阿里云30元3个月，腾讯云62元一年，符合ICP备案的服务器只要满足3个月时长就够用，并且一台云服务器可以备案5个网站域名或APP。云服务器吧yunfuwuqiba.com分享阿里云最便宜备案服务器价格和腾讯云ICP备案服务…
阅读更多...
MES_ENT_STD

MES_ENT_STD

生产执行系统（企业标准版）MES_ENT_STD ERP_ENT_STD_59438.ieqq.ent-CSDN博客 OAMS_ENT_STD-CSDN博客
阅读更多...
笔试——3.31腾讯笔试

笔试——3.31腾讯笔试

整体难度尚可&#xff0c;ac了三道半&#xff0c;第四题没什么时间了没怎么看。 第一题 #include<bits/stdc.h> using namespace std;vector<vector<pair<int, int>>>arr; vector<int>visited; //res 1 white 0 int cnt 0;void dfs(int x) {if…
阅读更多...
基于OrangePi Zero2的智能家居项目（开发阶段）

基于OrangePi Zero2的智能家居项目（开发阶段）

智能家居项目的软件实现 紧接上文 基于OrangePi Zero2的智能家居项目&#xff08;准备阶段&#xff09;-CSDN博客 目录 一、项目整体设计 1.1项目整体设计 1.2具体划分 二、开发工作的前期准备 1、进行分类&#xff0c;并用Makefile文件进行管理 参考&#xff1a;自己创…
阅读更多...
pajamas 0 publish repo fst in gitee

pajamas 0 publish repo fst in gitee

0. 好久没有blog了&#xff0c;真的好久了&#xff0c;先交代一波 因为半年来发生了很多&#xff0c;计划有变&#xff0c;辞工作&#xff0c;出去耍&#xff0c;找工作&#xff0c;重新计划… 从半年前开始&#xff0c;就想好了&#xff0c;最近这两年应该优先会写代码 &…
阅读更多...
一篇讲明白 Hadoop 生态的三大部件

一篇讲明白 Hadoop 生态的三大部件

文章目录 每日一句正能量前言01 HDFS02 Yarn03 Hive04 HBase05 Spark及Spark Streaming关于作者推荐理由后记赠书活动 每日一句正能量 黎明时怀着飞扬的心醒来&#xff0c;致谢爱的又一天&#xff0c;正午时沉醉于爱的狂喜中休憩&#xff0c;黄昏时带着感恩归家&#xff0c;然后…
阅读更多...
python实现模糊神经网络(pytorch版)

python实现模糊神经网络(pytorch版)

1 理论 模糊神经网络是一种基于模糊逻辑的神经网络模型&#xff0c;其主要用于处理模糊信息和不确定性的问题。模糊神经网络可以将输入数据映射到一个模糊集合中&#xff0c;然后通过一系列的模糊规则进行求解&#xff0c;最终输出一个模糊集合。 模糊神经网络的基本原理是将…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023