webpack | 字节青训营

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

前端项目由资源构成，webpack支持前端资源编译及打包，模块化+一致性

使用

1、安装

npm i -D webpack webpack-cli

2、编辑配置文件

3、执行编译命令

npx webpack

打包流程

1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；shell webpack.config.js
2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
3. 确定入口：根据配置中的 entry 找出所有的入口文件；
4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
5. 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个module的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

配置

• 流程类和工具类
• HMR热更新，代码保存直接替换页面

module.exports={
    devServer:{hot:true}
}
npx webpack serve

• treeshaking，未被调用的引入，不可达的代码不打包（对lodash工具类库很有效）
• 缓存、sourcemap(调试)、性能监控、日志、代码压缩、分包

loader

• 链式调用（less->css->style），支持异步执行，份normal、pitch两种模式
  • less-loader:实现 less => css 的转换:
  • css-loader:将 CSS 包装成类似 module.exports ="${css}"的内容，包装后的内容符合 JavaScript 语法
  • style-loader: 将 css 模块包进 require 语句，并在运行时调用 iniectStyle 等函数将内容注入到页面的 style 标签

plugin

插件围绕钩子展开，钩子的核心信息：

1. 时机: 编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情
2. 上下文: 通过 tapable 提供的回调机制，以参数方式传递上下文信息，
3. 交互: 在上下文参数对象中附带了很多存在side effect 的交互接口，插件可以通过这些接口改变