1. 什么是webpack webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容 1. webpack中的module是什么 对于 webpack 来说，项目源码中所有资源（包括 JS、CSS、Image、Font 等等）都属于 module 模块。可以配置指定的 Loader 去处理这些文件 2. 我们常说的 chunk 和 bundLe 的区别是什么？（important!!!!） 2.1 Chunk Chunk是webpack打包过程中Modules的集合，是（打包过程中）的概念，Webpack的打包是从一个入口模块开始，入口模块引用其他模块，其他模块引用其他模块..webpack通过引用关系逐个打包模块，这些module就形成了一个chunk， 如果有多个入口模块，可能会产出多条打包路径，每条路径都会形成一个chunk， 2.2 Bundle 是我们最终输出的一个或者多个打包好的文件， 2.3 Chunk和Bundle的关系是什么？ 大多数情况下，一个chunk会生产一个bundle但是也有例外，但是如果加了sourcemap，一个entry，一个chunk对应两个bundle. Chunk 是过程中代码块，Bundle是打包结果输出的代码块。Chunk在构建完成成就呈现为Bundle 3. loader 模块转换器,将非js模块转化为 webpack能识别的js模块。 Loader 是webpack中提供了一种处理多种文件格式的机制，因为webpack只认识JS和JSON，所以Loader相当于翻译官，将其他类型资源进行预处理。 用于对模块的"源代码"进行转换。 loader支持链式调用,**调用的顺序是从右往左。**链中的每个loader会处理之前已处理过的资源，最终变为js代码。 可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。 常见的loader有这些： less-loader:将less文件编译成css文件 css-loader:将css文件变成commonjs模块加载到js中，模块内容是样式字符串 style-loader: 创建style标签，将js中的样式资源插入标签内，并将标签添加到head中生效 ts-loader: 打包编译Typescript文件 本质上, webpack loader将所有类型的文件,转换为应用程序的**依赖图*可以直接引用的模块 4.Plugin 扩展插件, webpack运行的各个阶段,都会广播出对应的事件。集件去监听对应的事件。 Plugin功能更强大，主要目的就是解决loader 无法实现的事情，比如打包优化和代码压缩等。Plugin加载后，在webpack构建的某个时间节点就会触发plugin定义的功能，帮助webpack做一些事情。实现对webpack的功能扩展。 常见的Plugin有哪些 html-webpack-plugin 处理html资源，默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css） mini-css-extract-plugin 打包过后的css在js文件里，该插件可以把css单独抽出来 clean-webpack-plugin 每次打包时候，CleanWebpackPlugin 插件就会自动把上一次打的包删除 5. Compiler 对象,包含了 webpack环境的所有配置信息。包换 options loader, plugins. webpack启动的时候实例化,它在全局是唯一的。可以把他理解为 webpack的实例。 6. Compliation 包含了当前的模块资源,编译生成资源。 webpack在开发模式下运行的时候,每当检测到一个文件变化,就会创建一次新的 Compliation. 7. 能简单描述一下 webpack的打包过程吗? 1初始化参数: shell webpack. config.js 2开始编译:初始化一个 Compiler对象,加载所有的配置,开始执行编译 3确定入口:根据 entry中的配置,找出所有的入口文件 4编译模块:从入口文件开始,调用所有的 loader,再去递归的找依赖 5完成模块编译:得到每个模块被翻译后的最终内容以及他们之间的依赖关系, 6输出资源:根据得到依赖关系,组装成一个个包含多个 module的 chunk 7输出完成:根据配置,确定要输出的文件名以及文件路径。 8. 什么是模热更新,有什么优点？ 模块热更新是 webpack 的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。 优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式; webpack的热更新又称热替换（Hot Module Replacement），缩写为HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。HMR的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS 与浏览器之间维护了一个Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起Ajax请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起jsonp请求获取该chunk的增量更新 9. webpack的核心概念 Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js output ：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。 Loader：模块转换器，用于把模块原内容按照需求转换成新内容。Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。 10. gulp/grunt 与 webpack的区别是什么? 三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。 webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。