1 课程内容概括

本笔记对应的课程部分简要介绍了Webpack的使用。

2 概述

Webpack的使用核心是配置，所以Webpack的使用知识重点也围绕着配置，配置可以大概分为两类。

第一类是流程类，指作用域流程中的某一个或者若干个环节，这些配置项会直接影响到打包效果。

另一种是工具类，这类配置在主流程之外，通过这些配置项，可以提供更多工程化能力。

流程类的配置方法分为四步：

输入、模块解析、模块转译、后处理。

文件结构：

./webpack.config.js

/src/index.js

webpack.config.js文件是Webpack的配置文件。可以在这个文件中定义Webpack如何打包代码。

1.声明入口entry

2.声明产物出口output

3.运行npx webpack

在配置文件中，需要指定entry和output。entry是指Webpack打包的入口文件，output则是指Webpack打包后输出的文件。

处理CSS：

1.安装Loader

Webpack只能处理JavaScript文件，如果想处理其他类型的文件（例如CSS、图片等），需要使用Loader。Loader可以将其他类型的文件转换为Webpack可处理的模块。

2.添加module处理CSS文件

生成HTML：

1.安装依赖

2.声明产物出口output

3.执行npx webpack

HMR：

HMR（Hot Module Replacement）是一种热替换技术，它可以在不刷新页面的情况下，动态地更新代码的修改，提高开发效率。

要使用HMR，需要首先启动一个开发服务器，并在其中开启HMR。随后，在入口文件中，手动开启HMR。

Tree Shaking:

是一种优化技术，它可以删除未使用的代码，从而减小打包后的文件大小。使用Webpack的Tree Shaking需要在Webpack配置文件中，配置optimization属性来开启Tree Shaking。

缓存、Sourcemap、性能监控、日志、代码压缩、分包

本笔记对应的课程内容详细介绍了Webpack的使用方法。