一、谈谈你对Webpack的理解
1.1 背景
Webpack 的目标是实现前端项目的模块化，从而更高效地管理和维护项目中的每一个资源。在早期的前端项目中，我们通过文件划分的形式来实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中。约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后再调用模块化的成员。比如：
<script src="module-a.js"></script>
<script src="module-b.js"></script>
但这种模块化开发的弊端也十分明显，模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题。随后，就出现了命名空间方式，规定每个模块只暴露一个全局对象，然后模块的内容都挂载到这个对象中。
window.moduleA = {
method1: function () {
console.log('moduleA#method1')
}
}
不过，这种方式也没有解决第一种方式的依赖等问题。接着，有出现了使用立即执行函数为模块提供私有空间，通过参数的形式作为依赖声明。
(function ($) {
var name = 'module-a'
function method1 () {
console.log(name + '#method1')
$('body').animate({ margin: '200px' })
}
window.moduleA = {
method1: method1
}
})(jQuery)
上述的方式早期解决模块的方式，但是仍然存在一些没有解决的问题。例如，我们是用过script标签在页面引入这些模块的，这些模块的加载并不受代码的控制，时间一久维护起来也十分的麻烦。
除了模块加载的问题以外，还需要规定模块化的规范，如今流行的则是CommonJS 、ES Modules。
特别是随着前端项目的越来越大，前端开发也变得十分的复杂，我们经常在开发过程中会遇到如下的问题： - 需要通过模块化的方式来开发 - 使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码 - 监听文件的变化来并且反映到浏览器上，提高开发的效率 - JavaScript 代码需要模块化，HTML 和 CSS 这些资源文件也会面临需要被模块化的问题 - 开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化
而Webpack的出现，就是为了解决以上问题的。总的来说，Webpack是一个模块打包工具，开发者可以很方面使用Webpack来管理模块依赖，并编译输出模块们所需要的静态文件。
Webpack的核心概念
Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。告诉Webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
output：出口，告诉Webpack在哪里输出它打包好的代码以及如何命名，默认为./dist
Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。
Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在Webpack构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
Webpack的基本功能有哪些？
代码转换：TypeScript编译成JavaScript、SCSS编译成CSS等等
文件优化：压缩JavaScript、CSS、html代码，压缩合并图片等
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
Webpack如何配置多入口文件?
entry: { home: resolve(__dirname, "src/home/index.js"), about: resolve(__dirname, "src/about/index.js")}
用于描述入口的对象。你可以使用如下属性：
dependOn:当前入口所依赖的入口。它们必须在该入口被加载前被加载。
filename:指定要输出的文件名称。
import:启动时需加载的模块。
library:指定library选项，为当前entry构建一个library。
runtime:运行时chunk的名字。如果设置了，就会创建一个新的运行时chunk。在Webpack 5.43.0之后可将其设为false以避免一个新的运行时chunk。
publicPath:当该入口的输出文件在浏览器中被引用时，为它们指定一个公共URL地址
常用loader
css-loader读取合并CSS文件
style-loader把CSS内容注入到JavaScript里
ts-loader: 打包编译Typescript文件
sass-loader解析sass文件（安装sass-loader，node-sass）
postcss-loader自动添加兼容浏览器前缀（postcss.config配置）
url-loader将文件转换为base64 URI。
vue-loader处理vue文件。
