本文详细介绍了Webpack作为前端代码构建工具的功能，包括它如何处理模块化代码，与其他构建工具（如Gulp、Grunt）的区别。重点讲解了Webpack的四大核心概念：入口(entry)、输出(output)、Loader和插件(plugins)，以及它们在构建过程中的作用。Loader用于将非JavaScript模块转换为JavaScript，而插件则处理Loader无法完成的任务，如生成HTML文件和优化代码打包。
代码构建与webpack知识点
1、Webpack 工具都做了些什么
- 如今前端项目大多数都使用了模块化，而如果想要将多个文件的代码打包成最终可按照预期运行的代码，则需要使用到代码构建工具。
- 不管项目代码是如何进行组织的，项目中又有多少个文件，最终浏览器依然会从 HTML 内容进行解析和加载，因此我们需要对项目中的代码进行构建（包括编译和打包），生成浏览器可正常解析和加载的内容
2、常见的前端构建工具
对于前端开发来说，我们会用到各式各样的构建/打包工具：
涉及模块化代码打包的主要有 Grunt/Gulp/Webpack/Rollup
-
Gulp/Grunt 是一种能够优化前端工作流程的工具，比如自动刷新页面、combo、压缩 CSS/JavaScript、编译 Less/Sass 等
-
Webpack/Rollup 是一个 JavaScript 的模块打包器，用于整合编译成最终的代码。
-
其中，Rollup 通常用来构建库，Webpack 更适合用来构建应用程序。
3、了解Webpack
Webpack 的使用中有 4 个核心概念：入口（entry）、输出（output）、Loader、插件（plugins）
最低0.47元/天 解锁文章
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
