webpack入门进阶调优第一章

本文介绍了Webpack的基本概念、为何需要它,以及如何通过Webpack解决模块依赖问题。从模块化原理、JavaScript模块标准,到Webpack的安装、配置和实际操作,包括Webpack Dev Server的使用,旨在帮助开发者理解并高效利用Webpack进行项目构建。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.1何为Webpack

webpack是开源的JS模块打包工具

核心功能是解决模块之间的依赖,吧哥哥模块按照特定的规则和顺序组织在一起,最终合并为一个JS文件。这个过程叫模块打包

1.2为何需要Webpack

1.2.1何为模块

在设计程序结构时,更好的组织方式是按照特定的功能将其拆分为多个代码段,每个代码段实现一个特定的目的。可进行独立的设计开发测试,最终通过接口来组合在一起,这就是基本的模块化思想。

1.2.2 JavaScript中的模块

JavaScript中没有模块,Brendan Rich最初设计语言只定位成小型脚本语言。再过去很长时间只能通过script标签将他们一个个插入页面,缺点很多:

  • 需要手动维护加载顺序,依赖关系隐式
  • 每个script意味一次请求,拖慢网页渲染速度
  • 每个script标签顶层作用域即全局作用域,容易造成全局作用域的污染。

模块化解决了上述问题:

  • 通过导入导出语句清晰看到模块间的依赖关系
  • 模块可以借助工具进行打包,在页面中只需要加载合并后的资源文件,减少网络开销
  • 多个模块之间作用域隔离,彼此不会用命名冲突

2015年, ES6正式定义了JavaScript模块标准!已得大多数现代浏览器支持,但实际应用方面还需要等待一段时间,主要原因:

  • 无法使用 code splitting 和 tree shaking
  • 大多数npm模块还是CommonJS形式,浏览器不支持其语法,没法世界拿来用
  • 仍然需要考虑个别浏览器及平台的兼容性问题

那么,如何让我们的工程在使用模块化的同时也能正常运行在浏览器中,就到了模块打包工具的出场了。

1.2.3模块打包工具

任务是解决模块间的依赖,使其打包后的结果能运行在浏览器上。工作方式主要分两种:

  • 将存在依赖关系的模块按照特定规则合并为单个JS文件,一次全部加载进页面
  • 在页面初始时加载一个入口模块,其他模块一步的进行加载

目前社区中比较流行的模块打包工具Webpack、Parcel、Rollup等

1.2.4 为何选择Webpack

1) Webpack默认支持多种模块标准,包括AMD、CommonJS,以及最终的ES6模块

2)Webpack有完备的代码分割(code splitting)解决方案

3)Webpack可以处理各种类型的资源

4)Webpack拥有庞大的社区支持。

1.3安装

安装Node.js环境

node -v
npm -v

npm安装Webpack方式:一种全局安装,一种本地安装

全局安装Webpack好处是npm帮我们绑定一个命令行环境变量,一次安装处处运行

本地安装则会添加其成为项目中的依赖,只能在项目内部使用。

建议本地安装方式,主要原因:

  • 全局安装与他人进行项目协作时,由于每个人系统中Webpack版本不同,可能会导致输出结果不一致
  • 部分依赖于Webpack的插件会调用项目中的Webpack的内部模块,这种情况下仍然需要在项目本地安装Webpack,而如果全局本地都用则容易混淆

新建一个工程目录

npm init

生成一个package.json文件

安装Webpack命令

npm i webpack webpack-cli --save-dev

webpack是核心模块,webpack-cli则是命令行工具,在本例中两者是必需的

安装结束后,在命令行执行npx webpack -v 以及 npx webpack-cli -v 可显示各自的版本号,即证明安装成功

1.4打包第一个应用

工程目录添加以下几个文件

index.js

import addContent from "./add-content.js";
document.write("my first Webpack app.<br />");
addContent();

add-content.js

export default function () {
  document.write("Hello world!");
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My first Webpack app.</title>
  </head>
  <body>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

在控制台输入打包命令

npx webpack --entry=./index.js --output-filename=bundle.js --mode=development

打包效果

用浏览器打开index.html,如图

 

 回顾指令

entry是资源打包入口。webpack从这里开始进行模块查找

output-filename是输出资源名,打包完成出现dist目录包含bundle.js是Webpack打包结果

mode是打包模式(development、production、none),当置于development和production模式下自动添加适合当前模式的一系列配置,减少人为工作量。开发环境一般设置为development模式

1.4.2使用npm script

为了使命令行指令简洁,我们可以在package.json中添加一个脚本命令

"scripts": {
    "build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"
  },

重新打包输入npm命令即可

npm run build

1.4.3使用默认目录配置

通常我们分别设置源码目录与资源输出目录

工程中创src目录,并将index.js和add-content.js移动到该目录下,资源输出目录,Webpack已经默认是/dist,源代码入口Webpack默认就是src/index.js。可以省略掉entry配置

编辑package.json:

"scripts": {
    "build": "webpack --output-filename=bundle.js --mode=development"
  },

1.4.4使用配置文件

 Webpack有非常多的配置项以及对应的命令行参数

npx webpack -h

当项目需要越来越多的配置项时,命令维护困难。所以创建一个配置文件,在Webpack每次打包是读取该配置即可

工程下创建 webpack.config.js

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
  },
  mode: "development",
};

值得注意的是Webpack对于output.path的要求是使用绝对路径(从系统根目录开始的完整路径),之前我们在命令行中为了简洁所以使用了相对路径,而在webpack.config.js中,我们通过调用node.js的路径拼装函数——path.join,将__dirname与dist连接起来,得到了最终的资源输出路径。

去掉package.json中配置的打包参数了

"scripts": {
    "build": "webpack"
  },

1.4.5webpack-dev-server

提高调试效率的本地开发工具 文件修改,自动刷新

npm install webpack-dev-server --save-dev

ps:--save-dev将工具作为devDependencies开发环境依赖,工程上线时要进行依赖安装可以通过

npm install --production过滤掉devDependencies中的模块

为了便捷启动webpack-dev-server,添加dev指令

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

更改webpack.config.js

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "./bundle.js",
  },
  mode: "development",
  devServer: {
      publicPath: '/dist',
  }
};

添加devServer对象专门放webpack-dev-server配置。webpack-dev-server可以看做服务者,接收浏览器请求,将资源返回。当服务启动时,会先让Webpack进行模块打包并将资源准备好。当接收到浏览器的资源请求时,会首先进行URL地址校验。如果改地址是资源服务地址(上面配置的publicPath),就从打包结果中寻找该资源返回浏览器。反之,地址不属于资源服务地址,则直接读取硬盘中的源文件并将其返回。

webpack-dev-server两大职能:

1.令Webpack进行模块打包,并处理静态资源文件请求

2.作为普通的Web Server,处理静态资源文件请求

<think>嗯,用户之前问过关于全栈转Go和AI后端的学习计划,现在他进一步说明了自己的情况。他现在是大一学生,想要先在学校里学好全栈,积累经验后再转向后端专精,特别是从Node.js转到Go。我需要根据他的新需求整学习计划。 首先,回顾之前的计划,我给他制定了一个分阶段的计划,从全栈基础到Go后端再到AI集成。但现在用户明确说想先专注全栈,之后再转后端。因此,重点应该放在全栈基础,特别是Node.js,然后逐步过渡到Go。 接下来,我需要确定用户的需求是否有变化。用户之前的目标是Go+AI业务后端,但现在更倾向于先全栈再转后端。可能用户意识到全栈基础对后端开发有帮助,或者对Node.js更熟悉,想先打好基础再转语言。需要确保新计划既涵盖全栈技能,又为后续转向Go做准备。 然后,制定阶段性的计划。第一阶段应该巩固前端基础,包括HTML、CSS、JavaScript,然后是前端框架如Vue或React。同时,后端部分先用Node.js,学习Express或Koa框架,数据库使用MongoDB或MySQL。项目实战需要整合前后端,部署到云服务器。 第二阶段,深化后端能力,逐步引入Go语言。这时候用户已经有Node.js经验,对比学习Go会更高效。需要设计项目,让用户用Go重构部分Node.js的后端,体验两者差异。同时,学习分布式系统和微服务,为进阶做准备。 第三阶段,转向后端专精,特别是Go的高并发和云原生技术。项目方面需要更复杂的系统,如高并发应用或微服务架构,并集成监控和日志系统。同时,结合之前的全栈经验,可能涉及CI/CD和容器化部署。 另外,要注意用户可能的时间安排,作为大学生,课程和项目需要平衡。建议利用寒暑假集中学习,学期中巩固知识。同时,参开源项目和撰写技术博客可以提升竞争力。 最后,避免之前的误区,比如过早追求新技术,应专注当前技术栈,打好基础。同时,强项目实践和代码质量,确保每个阶段都有可展示的成果,帮助校招时脱颖而出。 总结,整后的计划应分三阶段:全栈基础(Node.js)、后端过渡(Go引入)、后端专精(Go深度)。每个阶段都有明确的学习内容和项目,确保用户逐步提升,平滑过渡到后端开发,同时保持全栈的广度。</think>--- ### **全栈→后端专精(Node.js→Go)学习计划** **核心逻辑**:**“全栈广度建立工程认知 → 逐步下沉后端技术深度”**,用Node.js快速实现业务闭环,后期迁移到Go提升性能 --- #### **阶段1:大一暑假-大二上(全栈基础)** **目标**:**用Node.js+React实现可商用的Web应用** | 时间 | 学习模块 | 关键内容 | 验证标准 | |---|---|---|---| | **第1-2周** | **现代前端基础** | - TypeScript类型系统<br>- React Hooks状态管理<br>- Tailwind CSS原子化样式 | 实现知乎风格问答页面 | | **第3-4周** | **Node.js核心** | - Express中间件机制<br>- RESTful API设计规范<br>- JWT鉴权流程 | 开发博客系统API(带RBAC权限) | | **第5-6周** | **数据库实战** | - MongoDB聚合管道<br>- Mongoose模式验证<br>- Redis缓存热点数据 | 构建商品秒杀系统(防超卖) | | **第7-8周** | **工程化基建** | - Webpack配置化<br>- Docker容器化部署<br>- GitHub Actions自动化 | 实现CI/CD全流程(Dev→Prod) | | **第9-12周** | **全栈项目** | - Next.js服务端渲染<br>- Node.js对接支付接口(支付宝沙箱)<br>- 性能监控(Sentry) | 上线校园二手交易平台 | **实战技巧**: - 使用`swagger-ui-express`自动生成API文档 - 在Vercel免费托管Next.js应用(体验Serverless) --- #### **阶段2:大二下-大三上(后端深化)** **目标**:**将Node.js项目逐步迁移到Go,建立性能对比认知** ##### **迁移策略** ``` Node.js服务 → Go重写关键模块 → 混合架构 │ │ ├─ 保留快速迭代势 └─ 用Go处理高并发场景(如WebSocket推送) ``` ##### **学习路线** 1. **Go语言特性**: - 对比Node.js事件循环Go协程度(画Goroutine生命周期图) - 用`go test -bench`对比Fibonacci函数的性能差异 2. **渐进迁移案例**: - **案例1**:用户服务迁移 - 原Node.js代码:Express + Mongoose - Go重写方案:Gin + GORM + JWT-go - **案例2**:实时聊天模块 - 原Node.js方案:Socket.io + Redis Pub/Sub - Go化方案:Gorilla WebSocket + NSQ消息队列 3. **性能**: - 用`pprof`分析Go程序内存泄漏 - 使用`vegeta`对Node.js/Go接口做压力测试对比 --- #### **阶段3:大三下-大四(后端专精)** **目标**:**构建Go领域模型设计能力,冲击基础设施层开发** ##### **高阶技术栈** | 领域 | 关键技术 | 学习方式 | |---|---|---| | **并发模型** | - Goroutine泄漏检测<br>- sync.Pool对象池<br>- atomic无锁编程 | 阅读《Concurrency in Go》并手写线程安全队列 | | **分布式系统** | - Raft共识算法实现<br>- 分布式锁(etcd)<br>- 分布式追踪(OpenTelemetry) | 实现简易版Redis Cluster | | **云原生** | - Operator模式开发<br>- Service Mesh数据面代理<br>- 可观测性体系构建 | 用Go重写Envoy过滤器 | ##### **差异化项目建议** 1. **数据库中间件开发** - 实现SQL防火墙(解析AST拦截危险操作) - 开发分库分表路由组件(基于一致性哈希) 2. **AI基础设施** - 用Go实现模型服务化(ONNX Runtime CGO绑定) - 构建特征计算引擎(替代Python Pandas) --- #### **关键转折点训练** 1. **思维转换训练**: - 每周用Go重写一个Node.js模块(如文件上传服务) - 在LeetCode用Go刷题(重点:并发题、系统设计题) 2. **架构视野提升**: - 研究CNCF项目架构图(如Kubernetes Scheduler) - 用PlantUML绘制自己项目的分层架构 --- ### **校招突围策略** $$ \text{Offer概率} = \frac{ \text{全栈项目} \times \text{性能化经验} }{ \text{八股文盲区} } + \text{基础架构理解} $$ **执行要点**: - 在简历中明确标注**性能提升数据**(如“Go重写后QPS从800提升至5200”) - 准备《Node.js到Go的架构迁移思考》技术文章作为加分项 --- ### **学习资源精准推荐** 1. **Node.js深度**: - 书籍:《Node.js设计模式(第2版)》(重点第6章流处理) - 视频:Udemy《Advanced Node.js for Developers》 2. **Go进阶**: - 开源项目:etcd源码(学习Raft实现) - 专栏:极客时间《Go 语言从入门到实战》 --- 通过这种路径,你将在保留全栈快速开发能力的同时,逐步在后端领域建立**不可替代的技术纵深**。大四时可选择: - **路径1**:加入使用Go的中厂(如B站/七牛云) - **路径2**:进入AI基础设施初创公司(需补充K8s生态知识)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值