WebPack

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

什么是 webpack ?

webpack 是一个现代 JavaScript 应用程序的静态模块打包器
webpack 可以递归的打包项目中所有模块（递归：指定一个入口，分析模块的依赖，它会递归的查找所有相关的依赖）

核心概念

Entry：配置入口文件。webpack 会找出有哪些模块是入库的依赖 ， 相关的依赖会被处理，输出到 bundles 的文件中
Output：output 属性会告诉 webpack 它所创建的bundles 如何命名，默认值为 ./dist
module：模块。Webpack 里一切皆模块，一个模块对应一个文件。Webpack 从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块。一个 chunk 由多个模块组合而成，用于代码的合并和分割。
loader：模块转换器。用于将模块的原内容按照需要转成你想要的内容
babel 和 webpack的区别：

• babel：JS新语法编译工具，只关心语法，不关心模块化
• webpack：打包构建工具，是多个 Loader plugin 的集合

webpack与grunt、gulp的不同？

Webpack 与 Gulp、Grunt 没有什么可比性。
Webpack 可以看作模块打包机，通过分析项目结构找到js模块及一些浏览器不能直接运行的语言（scss typescript）
Grunt 和 Gulp 的工作方式：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack 的工作方式：把项目当做一个整体，通过一个给定主文件（如：index.js），Webpack 将这个文件开始找到你的项目的所有依赖文件，使用 loaders 处理它们，最后打包为一个（或多个）浏览器可识别的 JavaScript 文件。

webpack有哪些优缺点

优点：

• 可通过 plugin 扩展
• 使用场景不局限于 web 开发
• 良好的开发体验

**缺点：**只能用于采用模块化开发的项目

webpack打包原理？

把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。
Webpack 是一个模块打包器，grunt 和 gulp 是执行任务的，
webpack 递归的打包项目中所有模块，最终生成几个打包后的文件，与其他工具最大的不同在于它支持 code-splitting（代码分割），模块化（AMD，ESM，CommonJS）开发，全局的分析工具（分析整个项目引入的模块）

什么是模块热跟新 ？ 有什么优点？

模块热更新：是webpack的一个功能，可以使代码修改后不用刷新浏览器就可更新内容。 是高级版的自动刷新浏览器（将代码重新执行一遍而不是整体刷新浏览器）
**优点：**只更新变更内容，以节省开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式

如何利用webpack来优化前端性能？

代码压缩、按需加载、使用 Dll 进行分包
正常情况下 node_module 会被打包成一个文件，使用 dll 技术，可将不常更新的框架和库进行单独打包，生成一个chunk

webpack 为什么启动速度慢

它是将所有模块构建完了，再去启动项目的

如何提高webpack的构建速度？

• 减少需要构建的文件或代码
• 多进程打包 thread-loader，将其放在费时的 loader 之前