为什么要学习Webpack?
- 理解前端“工程化"概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
文章主要内容
01.什么是Webpack
但是，
- 依赖手工，比如有50个JS文件…操作，过程繁琐
- 动当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境十致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
这些都是旧时代非常突出的问题，对开发效率影响非常大，直到。。。
Webpack的作用
本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个 Bundle
- 支持 Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理css、图片等资源文件支持HMR ＋开发服务器
- 支持持续监听、持续构建支持代码分离
- 支持Tree-shaking支持Sourcemap
- 。。。
02.使用Webpack
小示例
核心流程
- 入口处理
- 从
entry文件开始，启动编译流程
- 从
- 依赖解析
- 从
entry文件开始,根据’requireorimport等语句找到依赖资源
- 从
- 资源解析
- 根据
module配置，调用资源转移器，将. png .css 等非标准JS资源转译为JS内容
- 根据
- 资源合并打包
- 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
模块+一致性
- 多个文件资源合并成一个，减少http 请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript 方言统一图片、CSs、字体等其它资源的处理模型Etc…
使用Webpack
流程类的配置
配置总览
https://webpack.js.org/configuration/
处理CSS
Loader
- Loader有什么作用?为什么这里需要用到css-loader、style-loader
- 与旧时代——在HTML文件中维护css 相比,这种方式会有什么优劣处?
- 有没有接触过Less、Sass、Stylus这一类CSS预编译框架?如何在 Webpack接入这些工具?
参考资料
接入Babel
Babel是一个JavaScript编译器，允许开发人员使用最前沿的JavaScript编写代码，然后Babel将其转换为老式的JavaScript，让更多的浏览器能够理解。
- Babel具体有什么功能?
- 语法转换：Babel可以将使用了最新语法的JavaScript代码转换为向后兼容的旧版本代码，以确保在不支持新语法的旧版浏览器中也能正常运行。
- 源码转换：Babel可以将使用了新的API或语法特性的源码转换为等效的旧版本代码，以便在不支持这些新特性的环境中也能正常运行。
- 插件支持：Babel支持通过插件来扩展其功能，开发者可以根据自己的需求编写自定义插件，用于实现特定的转换或功能。
- 构建工具集成：Babel可以与各种构建工具（如Webpack、Rollup等）无缝集成，以便在项目构建过程中自动进行代码转换。
- Babel 与 Webpack 分别解决了什么问题?
- Babel的问题解决：Babel主要解决了JavaScript语法兼容性的问题。它可以将使用了最新语法的JavaScript代码转换为向后兼容的旧版本代码，以确保代码在不支持新语法的旧版浏览器中也能正常运行。
- Webpack的问题解决：Webpack主要解决了前端项目的模块化打包问题。它可以将项目中的各个模块按照依赖关系进行打包，生成最终的静态资源文件，以便在浏览器中加载和执行。
- 为何两者能协作到一起了?
- Babel作为一个编译器，可以将新版本的JavaScript代码转换为旧版本代码。而Webpack可以将项目中的各个模块打包成静态资源文件。因此，Babel可以在Webpack的打包过程中先对JavaScript代码进行转换，然后再由Webpack进行打包处理。
- Babel和Webpack都支持插件机制。开发者可以通过Babel插件来实现特定的转换或功能，同时也可以通过Webpack插件来扩展Webpack的功能。这使得两者可以通过插件的方式进行集成和扩展，实现更灵活和定制化的功能。
关于Babel
参考资料：
- https://webpack.js.org/loaders/babel-loader/
- https://babeljs.io/
- https://babeljs.io/docs/en/babel-preset-env
- https://babeljs.io/docs/en/babel-preset-react
- https://babeljs.io/docs/en/babel-preset-typescript
生成HTML
相比于手工维护HTML内容，这种自动生成的方式有什么优缺点?
https://webpack.js.org/plugins/html-webpack-plugin/
工具线
HWR
更改立刻呈现浏览器上
Tree-Shaking
Tree-Shaking一树摇，用于删除Dead Code
本笔记记录来源于范文杰大大在字节青训营中讲的视频