【前端进阶】13 代码构建和webpack必备技能

最新推荐文章于 2025-05-02 16:45:26 发布

指尖时光.

最新推荐文章于 2025-05-02 16:45:26 发布

阅读量461

点赞数 22

文章标签：前端 webpack node.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/Ethan_zxt/article/details/145907199

版权

代码构建和webpack

代码构建

最初的页面开发，前端实现一个页面，只要在一个文件里面完成，包括htm、css、JavaScript各种内容，后台将常用的静态资源放置CDN，并使用link和script的src属性引入的方式来减少前端开发代码的编写。
为了提高代码的可读性、项目的可维护性，会将一些通用的工具和组件进行抽象，代码被有组织的按一定规则进行划分，比如按功能划分为页面、组件、工具库、脚本…这个过程被称为模块化

常说的模块化包括CommonJS/AMD/UMD/ES6 Moudle
在这里插入图片描述

CommonJS

CommonJS规范定义了模块怎样进行编写，从而各个系统之间可以进行相互操作
在这里插入图片描述
在该示例中，使用require载入该模块，使用moudle.exports输出模块

CommonJS特点
在这里插入图片描述

AMD

AMD主要为了解决异步加载模块而提出的，他通过指定模块和依赖的方式来定义模块
在这里插入图片描述

UMD

为了兼容AMD和CommonJS的规范，UMD模式被提出
在这里插入图片描述

ES6 模块

ES6模块化主要是为了在编译阶段就可以确定各个模块之间的依赖关系
在这里插入图片描述

由于ES6模块化是编译阶段确定模块间的依赖关系，因此在需要编译的时候babel、webpack等方式构建依赖关系树

在这里插入图片描述
ES6模块化在各个浏览器里的兼容性差异较大，需要进行Babal编译以及webpack进行打包，这个过程我们成为代码构建

在这里插入图片描述

Webpack

如果将多个文件的代码打包成最终可以按照预期运行的代码，则需要使用到代码构建工具
常见的前端构建工具
在这里插入图片描述
更多情况加会选择webpack，webpack的核心概念有四个 webpack

入口

入口指向前端应用的第一个启动文件
在这里插入图片描述

输出

输出字段用于告诉webpack要将打包后的代码生成的文件名是什么（filename），以及它们放在哪里（path）
在这里插入图片描述

Loader

Loader的作用就是把不同模块和文件（比如HTML、CSS、JSX、Typescript）转化为JavaScript模块
在这里插入图片描述

在这里插入图片描述

插件

插件就是解决Loader无法做到的事情，它可以访问在wenpack编译过程中的关键事件，对webpack内部示例的一些数据进行处理，处理完成后回调webpack让其继续
在这里插入图片描述

webpack做了什么
在这里插入图片描述

参考教程：前端进阶教程

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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