webpack概念

news2024/12/26 22:53:11

webpack概念

    • webpack
    • webpack-概念
    • webpack-使用准备
    • webpack-基础使用
    • webpack-更新打包
    • webpack-配置修改
    • webpack-打包流程图

webpack

  • 使用ES6模块化
  • 默认导出和导入
// 默认导出
export default {
    a: 10,
    b: 20
}

// 默认导入
import Obj from 'js文件路径'
  • 按需导出和导入
// 按需导出
export {
	a: 10,
	b: 20
}
// 按需导入
import {a, b} from 'js文件路径'
import * as Obj from 'js文件路径' // 搜集*所有按需导出, 合并到变量obj中
  • 无导出和导入(只为让js代码执行)
// 无导出
Array.prototype.MyForEach = function(){
    // ...内部实现略
}

// 无导入
import "js文件路径"

// 后面用数组就可以调用MyForEach方法了

箭头函数

// 1. 基础定义
const fn = () => {}   
fn()

// 2. 有参, 有返回值
const fn2 = (a, b) => {return a + b} 
fn(10, 20); // 结果是30

// 3. 参数"只有一个", 省略()
const fn3 = a => {return a * 2}
fn(50); // 结果是100

// 4. 函数体"只有一句"可以省略大括号和return, "默认返回这句话结果"给函数调用地方
const fn4 = a => a * 2;
fn(50); // 结果是100

什么是服务器, 本地如何搭建服务器, 服务器和浏览器关系, 什么是请求和响应

// 1. 什么是服务器
// 服务器是一台性能高, 24小时可以开机的电脑
// 服务器可以提供服务(例如: 文件存储, 网页浏览, 资源返回)

// 2. 本地如何搭建服务器
// 安装node软件环境, 下载express模块包, 编写相关代码, 即可得到一个web服务器, 给前端返回资源

// 3. 服务器和浏览器的关系
// 浏览器不负责保存网页, 都要靠着url地址去服务器后端, 请求网页相关代码, 回来在浏览器上解析显示
// 浏览器也不负责保存数据, 如果是前后端分离项目, 也要用ajax调用后端接口, 拿到数据回到浏览器上铺设显示

// 4. 请求和响应区别
// 浏览器 -> 请求资源 -> 服务器

// 浏览器 <-  响应数据 <- 服务器

webpack-概念

  • 现代 javascript 应用程序的 静态模块打包器 (module bundler)

    • 静态: 文件资源
    • 模块: node环境, 引入文件, 遵守模块化语法
  • 除了合并代码, 还可以翻译压缩代码

    • less/sass -> css
    • ES6/7/8 -> ES5
    • html/css/js -> 压缩合并

webpack-使用准备

  1. 创建01_webpack基础使用文件夹
  2. 初始化包环境
yarn init
  1. 安装依赖包
yarn add webpack webpack-cli -D
  1. 在package.json中, 配置scripts(自定义命令)
scripts: {
	"build": "webpack"
}

webpack-基础使用

  1. 新建src/add/add.js - 定义求和函数导出
export const addFn = (a, b) => a + b
  1. 新建src/index.js导入使用
// webpack打包的入口
import { addFn } from './add/add'
console.log(addFn(5, 2));
  1. 运行打包命令
yarn build
# 或者 npm run build
  1. src并列处, 生成dist目录和main.js文件

  2. 查看main.js文件, 是打包压缩后的代码

(()=>{"use strict";console.log(7)})();

webpack-更新打包

  1. 新建src/tool/tool.js - 导出数组求和方法
export const getArraySum = arr => arr.reduce((sum, val) => {
   return sum = sum + val;
}, 0)
  1. src/index.js - 导入使用
import { addFn } from './add/add'
import { getArraySum } from './tool/tool'

console.log(addFn(5, 2));
console.log(getArraySum([5, 6, 9, 10]));
  1. 重新打包
yarn build
  1. 自动覆盖原dist, 结果压缩极致
(()=>{"use strict";console.log(7),console.log([5,6,9,10].reduce(((o,e)=>o+e),0))})();

webpack-配置修改

修改默认入口和出口

默认入口: src/index.js

默认出口: dist/main.js

  1. 项目根目录 - 新建webpack.config.js文件 (默认配置文件名)
  2. 填入配置项
const path = require("path")

module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}
  1. 修改代码里src/index.js 为 src/main.js
  2. 重新打包观察输出文件名

webpack-打包流程图

图解流程

  1. 敲击命令, 代码执行过程

在这里插入图片描述

  1. 代码源文件和webpack之间关系图

    源码一定要和入口产生直接/间接引入关系, 才会被一起打包

    比如: request.js 就是间接引入
    在这里插入图片描述

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

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

相关文章

【每日一题】【LeetCode】【第三天】删除有序数组中的重复项

删除有序数组中重复项的解决之路 这个标签是简单&#xff0c;所以比较好过。 题干描述 根据题目描述&#xff0c;重点在于原地删除&#xff0c;也就是空间复杂度为O(1)。 测试案例&#xff08;部分&#xff09; 第一次 根据题目描述&#xff0c;重点在于原地删除。 class…

解决Linux【-bash: fork: retry: 没有子进程】

解决Linux【-bash: fork: retry: 没有子进程】问题发现问题解决设置Linux最大用户线程数设置单个用户可用最大进程数问题发现 日常工作中&#xff0c;服务器连不上&#xff0c;好在昨天登陆的服务器用户没有下线&#xff0c;然后执行任何命令时返回- bash: fork: retry: 没有子…

React(coderwhy)- 03(高阶组件+动画)

1.React性能优化SCU React更新机制 React的更新流程 ◼ React在props或state发生改变时&#xff0c;会调用React的render方法&#xff0c;会创建一颗不同的树。 ◼ React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI&#xff1a;  如果一棵树参考另外一棵树进行完…

可观测产品的最佳实践,涵盖端到端的可观测解决方案丨阿里云用户组深圳站

2022 年 9 月 28 日&#xff0c;阿里云在深圳举办了第 11 场阿里云用户组&#xff08;AUG&#xff09;活动&#xff0c;活动主题“可观测性实践”吸引了众多技术从业者及企业管理者来到现场。通过本次活动&#xff0c;参会企业了解到三块内容&#xff1a;1. Java 应用最佳实验&…

小蓝本 第一本 《因式分解技巧》 第八章 多项式的一次因式 笔记 (第八天)

小蓝本 第一本 《因式分解技巧》 第八章 多项式的一次因式 笔记 &#xff08;第八天&#xff09;前言余数定理有理根求法第一步第二步(可能有理根多的情况下&#xff0c;可以用)第三步快速识别特殊有理根情况1情况2求解注意习题8题目题解改错前言 坚持的第8天&#xff0c;因为…

北大陈斌Python算法笔记(一)

前言 &#x1f340;作者简介&#xff1a;被吉师散养、喜欢前端、学过后端、练过CTF、玩过DOS、不喜欢java的不知名学生。 &#x1f341;个人主页&#xff1a;红中 &#x1f342;不就是蓝桥杯嘛&#xff0c;干他&#xff01;&#xff01;我堂堂 线性结构 线性结构是一种有序数…

优先级反转问题及解决办法

优先级反转问题及解决办法什么是优先级反转解决方法1&#xff1a;优先级继承解决方法2&#xff1a;优先级天花板总结什么是优先级反转 优先级反转&#xff0c;是指在多线程的环境下&#xff0c;并且使用了信号量时&#xff0c;可能会出现的这样一种不合理的现象&#xff0c;即…

@PostConstruct 和 @PreDestroy 使用

目录1.简介2.使用3.注意事项4.执行顺序5.测试6.测试结果1.简介 PostConstruct&#xff1a; Java 自带的注解&#xff0c;在方法上使用该注解&#xff0c;会在项目启动的时候执行被修饰的方法。 PreDestroy&#xff1a; Java 自带的注解&#xff0c;在方法上使用该注解&#xff…

element 日期选择器数据更改,第一次进入页面,页面上没有回显(数据格式问题导致)

需求 页面列表数据&#xff0c;默认是展示一个月的数据 遇到的问题 一进来页面&#xff0c;日期选择器上是空的&#xff0c;但绑定的值是有数据的&#xff0c;页面上并没正确回显&#xff0c;但是去手动选择日期&#xff0c;也是可以正常回显的 思考 其实&#xff0c;选择…

【MySQL进阶教程】 索引详细介绍

前言 本文为 【MySQL进阶教程】 索引 相关知识介绍&#xff0c;下边具体将对索引概述&#xff0c;索引结构&#xff08;包括&#xff1a;索引结构概述&#xff0c;二叉树&#xff0c;B-Tree&#xff0c;BTree&#xff0c;Hash&#xff09;&#xff0c;索引分类&#xff0c;索引…

leetcode练习之商品折扣后的最终价格(单调栈算法)

题目描述 给你一个数组 prices &#xff0c;其中 prices[i] 是商店里第 i 件商品的价格。 商店里正在进行促销活动&#xff0c;如果你要买第 i 件商品&#xff0c;那么你可以得到与 prices[j] 相等的折扣&#xff0c;其中 j 是满足 j > i 且 prices[j] < prices[i] 的 最…

JdbcUtils工具类的优化升级——通过配置文件连接mysql8.0,并对mysql8.0中的表进行[简单查询]操作

目录 一、在DogDao中新增查询的功能 二、在DogDaoImpl类中继承基类&#xff0c;并实现接口的功能 三、创建工具接口RowMapper 四、重新定义一个基类BaseDao2 五、新建一个DogDaoImpl2实现类&#xff0c;继承基类BaseDao2&#xff0c;实现DogDao接口的两个查询功能 六、在…

【Kotlin】函数 ⑧ ( 函数引用 作为函数参数 | ::函数名 | 函数类型 作为函数返回值类型 )

文章目录一、函数引用作为函数参数二、函数类型作为函数返回值一、函数引用作为函数参数 函数 作为参数 , 有两种方式 : 传递 Lambda 表达式 , 也就是 匿名函数 作为参数值 ;传递 函数引用 作为参数值 ; 函数引用 可以将 具名函数 转为 函数的参数值 , 只要可以使用 Lambda 表…

程序员真是越来越懒了,Api 文档都懒得写?程序员:Api工具惯的!

关于大多数程序员不爱写文档问题&#xff0c; 我觉得可以从两个方面去拆解&#xff1a;主观原因、客观原因。 1. 客观 - 时间紧任务重&#xff0c;需求变化快 需求方每次都是紧急需求&#xff0c;老板每次都要求敏捷开发&#xff0c;快速响应。 按时交付的压力已经让大多数程…

区分: 小程序组件 and 小程序插件

近期发现有不少小伙伴分不清小程序组件和小程序插件&#xff0c;以为它们是一回事&#xff0c;只是措辞不一样。但实际上&#xff0c;小程序组件和小程序插件完全是两回事——插件是可以直接提供服务的&#xff0c;组件是给开发者提供的轮子&#xff0c;不能直接提供服务。下面…

Java--基本数据类型

文章目录前言一、数据类型-byte二、数据类型-short三、数据类型-int四、数据类型-long五、数据类型-float六、数据类型-double七、数据类型-char八、数据类型-boolean九、数据类型实例前言 Java提供了八种基本类型&#xff0c;六种数字类型&#xff08;四个整数型&#xff0c;…

LoRa无线远传水表方案ASR6500S/LLCC68

LoRa无线远传水表就是普通机械水表加上电子采集发讯模块而组成&#xff0c;电子模块完成信号采集、数据处理、存储并将数据通过通信线路上传给中继器、或手持式的抄表器。LoRa无线远传水表作为市面上比较火的智能水表&#xff1b;由主站通过传输媒体将多个户用仪表的数据集中抄…

MyBatis讲解,批量删除1

一、批量删除1 入参字符串 ”id1,id2,id3” 批量删除的关键字是 in 1.书写BookMapper 1.1先在navicat的新建查询里书写批量删除的sql语句 批量删除的sql语句 delete from book where id in (12,22); 1.2将sql语句复制到BookMapper里 2.书写BookDao批量删除方法 *书写dao…

【安全硬件】Chap.4 如何插入一个硬件木马到芯片的时序逻辑电路的漏洞里?如何构建可信赖的状态机?

【安全硬件】Chap.4 如何插入一个硬件木马到芯片的时序逻辑电路的漏洞里&#xff1f;如何构建可信赖的状态机&#xff1f;前言&#xff1a;硬件木马1. 时序逻辑电路中的设计漏洞Design Vulnerabilities序列检测器的设计漏洞——以智能门锁的虚位密码漏洞为例易受攻击的状态机写…

Qt基础之十八:WebEngine与JavaScript交互

Qt从5.6开始就用Qt Webengine替换了Qt WebKit,据说加载速度较Qt WebKit更快。 需在pro中添加QT += webenginewidgets 一.效果 二.实现 1.JavaScript调用Qt函数 在MainWindow中定义成员变量QWebChannel *m_channel;作为和web通信的数据通道 ①加载网页 void MainWindow::l…