17 | 打包部署：你的应用是如何上线的？
王沛
你好，我是王沛。今天我们来聊聊 React 应用的打包和部署。
从这节课开始，我们就进入了扩展篇的学习。通过基础篇和实战篇的学习，你应该对如何开发一个 React 应用已经心中有数了。但是我们也要知道，仅仅学会开发是不够的。在此基础之上，掌握打包部署、单元测试，以及了解 React 生态圈的一些常用项目，才能真正完成一个应用的开发。
所以在扩展篇我会对上述内容做一个整体的介绍，让你使用 React 进行开发时，没有知识盲区，能够完整应对应用的整个开发过程。
同时，我需要强调的是，我们在扩展篇的学习目标是总体把握，消除知识盲区。所以我会以介绍重要知识点为主，将我认为最重要或者最常用的概念、机制拎出来，让你有的放矢地进行学习。当然，每一篇的内容如果你想要深入学习，还需要去官方文档或者专门的教程去详细了解。
今天这节课，我将介绍最主流的打包工具 Webpack，通过了解它的基本概念和常用配置，让你能在完成 React 的应用开发之后，知道该怎么打包成可部署的应用。
为什么需要了解 Webpack？
我个人一直认为，每个前端开发者不一定要精通 Webpack，但有必要进行了解，至少要能看得懂一个 Webpack 的配置文件，以及遇到问题时能知道是 Webpack 的问题，还是自己代码的问题。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Webpack是前端开发中最主流的构建和打包工具之一，本文主要介绍了Webpack的基本工作原理和配置，以及loader和plugin这两个核心概念。文章首先通过一个文件处理的例子，详细讲解了如何配置Webpack来使用Less作为CSS的预处理器，并介绍了loader的链式使用机制。接着，文章提到了如何使用plugin来将生成的CSS文件和JavaScript文件分开，以及展示了提取CSS模块到单独CSS文件的插件mini-css-extract-plugin的用法。总结部分强调了对Webpack的基本工作原理的理解对于前端开发者的重要性，即使不精通也要能看懂配置文件，以便在遇到问题时能够定位并解决。整体而言，本文为读者提供了对Webpack基本工作原理和配置的快速了解，有助于前端开发者在应用开发过程中更好地理解打包部署的流程。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Hooks 核心原理与实战》，新⼈⾸单¥59
《React Hooks 核心原理与实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(7)
- 最新
- 精选
何以解忧感觉loader像是编译阶段的，plugin像是编译后的整体的个性化处理作者回复: 嗯，可以这么理解，loader 更多的是对资源的处理，plugin 则是补充处理。
2021-07-115
giteebravo
支持 css loader 的 Webpack 配置中，style-loader 为什么是最后一个执行呢？从数组的顺序来看，它应该是在 0 的位置呀。作者回复: 因为 loader 是按照数组倒序执行的，也就是从最后一个开始执行。
2021-07-0932
江谢木loader是针对不同类型文件间做转换、关系处理，最终生成js模块，而plugin是针对某一文件在打包过程的某一时刻做处理。混淆和压缩是针对文件进行的，所以应该用plugin。2021-07-0615
简单混淆和压缩应该用plugin，loader主要做转换2021-07-048
灵感_idea本节标题是“打包部署”，但内容只涉及了打包吧？至于部署，现在多是运维要做的。2023-04-05归属地：广东2- 莫春梦uglify模块可以做代码压缩混淆2023-07-26归属地：广东
奕晨在进行源代码打包时，通常还有一个重要的步骤，就是代码的混淆和压缩。那么在理解了 loader 和 plugin 之后，你觉得混淆和压缩这个功能，应该用 loader 还是 plugin 去实现呢？ 应该是plugin 处理代码的混淆和压缩。 plugin 是通常用于生成一些除了 JavaScript bundle 之外的一些打包结果。 loader主要用于处理不同类型的资源，将他们转换为模块。2023-06-06归属地：山东
收起评论