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

关于Webpack

Webpack是一个构造工具，它可以将我们代码中的多个模块打包成一个模块，也就是说将多个文件打包成一个文件，而且在打包的时候，它也会对代码进行压缩精简，并把ESM编写的代码转换成旧的JS代码，这样不仅可以提高浏览器的兼容性，而且浏览器请求资源时只要请求一个就可以了，这样可以减少浏览器请求资源的数量，从而使加载速度更加快。

用Webpack打包的项目必须是一个node项目，它默认会打包项目目录下src目录下的代码，目录src下的index.js默认是入口文件，在打包的时候，webpack会从这个文件作为出发点进行打包，之后会生成一个dist目录，这个目录下的是打包后的代码，而且代码会被压缩到同一行中，而且会把es6模块代码变成普通代码，webpack是按需打包的，它只会打包从入口文件出发去打包有引用到的东西。

entry（入口文件）

它可以更改打包时的入口文件的路径，可以传单个值，也可以传数组，也可以传对象（传对象的话会打包成过个文件）

output（输入文件)

它的值是一个对象，它可以更改打包后文件输出的路径，也可以更改输出文件名等等的属性

loader（加载器)

webpack默认是只处理.js结尾的文件的，如果想要让他处理其他类型的文件，就要下载并引入对应的loader，比如说，如果想处理.css结尾的文件，就要用css-loader并且搭配style-loader来使用。

babel（编译器)

它是js的一个编译器，可以将新的js代码变成旧的js代码，从而提高浏览器的兼容性

plugin（插件)

用它可以为webpack去扩展一些新的功能，它不会对代码进行处理，而是使webpack有一些新的功能

比如说可以下载html-webapck-plugin，这个插件可以自动在打包目录自动生成html页面，把插件下载好之后，在webpack.config.js里面的plugins节点做相应的配置

webpack的构建流程

webpack启动后，会从entry这个入口文件开始去递归解析entry依赖的所有module，找到每个module时，会根据model.rules里的配置loader进行相应的转换，再解析出module依赖的其他模块，会进行分组，解析的结果是一个一个的chunk，会将所有的chunk转换成文件输出的output，在整个构建流程中，webapck会在恰当的时候去执行plugin里的插件，从而完成plugin插件的任务