这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
1.什么是webpack
- 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
webpack的入口
- 入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
- 主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
webpack的输出
- output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
2.webpack有什么用
- Webpack是一个前端构建工具，可以将所有资源（包括Javascript，图像，字体和CSS等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。
- 浏览器只认识HTML、CSS、JavaScript这一类的文件，至于什么Sass、Less、jsx、ts等一系列的文件浏览器都不认识，如果你需要让浏览器能够正确识别这些文件，你就需要使用工具将Sass、Less等文件转为CSS，而TypeScript语法转换为JavaScript语法。
- 如果你不使用构建工具，那么你就必须手动将这些文件进行转换，可能一个文件中有好多个.scss、.ts文件，你都需要一个一个的去转，这样不光效率低不说，还很容易出错。
3.webpack的优点
有许多种类似webpack的打包工具，那为什么webpack这么受欢迎呢？
让我们来看看webpack的优点：
-
清晰简明的模块。一个稍微有点规模的应用往往有着一个复杂的资源关系网，在需要做优化的时候就会使一件非常的头疼的事情。webpack可以代替你做这个麻烦事，将复杂的多个文件打包成你希望的代码模块，引入会非常清晰，想对引入文件做点什么操作也会更容易。
-
代码拆分来做资源异步加载webpack打包成一个模块之后也带来一个问题，如果加载模块过于庞大，加载的速度就没法保证，所以webpack也提供了拆分代码后异步加载的方式，即先加载某个主要模块，当用到某个需要资源异步加载的模块时在对其发送请求加载，这样做在大型项目中很常见。
-
消除对未引用资源的依赖。在复杂应用又多静态资源的情况下会减少很多无效的浪费，这会对应用的有很大提升。
