Webpack

1 . Why? 2 . 是什么？ core-js是专门用来做 ES6 及以上 API 的polyfill. polyfill 翻译过来就叫做垫片/补丁，就是用社区上提供的一段代码，让我们在不兼容某些

如下，将每个文件的输出名，加上 content-hash ，即根据内容生成 hash 值，内容发生改变，生成的 hash 值也会改变。

1 . Why？ 2 . 是什么？ Preload: 告诉浏览器立即加载资源 Prefetch:告诉浏览器在空闲时才开始加载资源。 共同点： 都只会加载资源，并不执行 都有缓存 兼容性都比较差 区别：

1 . Why？ 2 . 是什么？ Code Split 只做了两件事： 分割文件：将打包生成的文件进行分割，生成多个 js 文件。 按需加载：需要哪个文件就加载哪个文件。 3 . 配置多个入口文件：

1 . TreeShaking 1 . 1 why？ 1 . 2 是什么？ 用上什么（引入了什么），才会打包什么，其他不打包！！！ 1 . 3 How？ 只针对 ES Module 2 .减少 Bab

1 . Why ？ 2 . 是什么？ 3 . How? 先查CPU核数？ 下载包: 使用： js 处理里的配置：

1 . Why? 2 . 是什么？ 3 . How ? Babel的配置： Eslint的配置： !!

Exclude / Include: 两种使用方式：（只能选一种使用！！） exclude: exclude: /node_modules/, include:

HotModuleReplacement 1 . why ? 开发时，我们修改了其中一个模块代码，Webpack就会默认将所有模块全部重新打包编译，速度很慢。 2 . 是什么？ 3 . 怎么用？ cs

引： 1 . SourceMap 是什么？ 2 . 怎么用？ 从 Webpack DevTool文档中可知，SourceMap的值有很多种情况 但最常用的就两种： 开发模式： cheap-module

1 . 两种开发模式 开发模式：代码能编译自动化运行 生产模式：代码编译优化输出 2 . Webpack 基本功能 开发模式：可以编译 ES Module 语法 生产模式：可以编译 ES Module

可有可无的准备工作： 将生产模式和开发模式下的两种配置文件放在一个config的文件夹下。 为了方便两个模式的分别运行，在package.json 文件里面设置快捷运行指令。 1 . 处理 CSS 资

下载包 npm i webpack-dev-server -D 配置 启动服务器&自动化 npx webpack serve 注意： 开发服务器是没有输出的，不会输出资源，是在内存中编译打包的。

1 . 下载包： npm i html-webpack-plugin -D 2 . 自动在 html 中引入 js 文件的插件： 用法： 下载 npm install --save-dev html-

针对 js 兼容性处理，用 Babel 针对代码格式，用 Eslint 注意： 我们先完成Eslint，检测代码格式无误后，再由Babel做代码兼容性处理。 1 . Eslint （插件） 使用Esl

{ test: /\.(ttf|woff2?)$/, type: "asset/resource", //注：此形式不会转 base 64，而 "asset" 会转 base64 gen

但是我们又想让打包出来的 js 文件放在 js 文件夹里面，图片放在 images 文件夹里面。 js 去修改文件名（入口文件打包出来的js文件），在其前面加上文件夹的名字 图片 ，要单独到图片的配置

1 . 处理图片资源 进行优化： 但转化为 base64 格式后 ，图片内存会增大一倍，所以这对大内存的图片就很不友好 。 所以我们一般只将 < 10kb 的图片转化为 base64 格式。 这就需要

> `webpack` 本身是不能识别样式资源的，所以我们许亚萍借助loader来帮助 webpack 解析样式资源。 **找loader：** - 去 webpack 官方文档中找对应的 loade