1.什么是webpack？[ https://webpack.docschina.org/ ]
webpack.png
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个打包后的文件(bundle)。它和其他工具最大的不同在于它支持模块化(AMD,ESM,CommonJS)开发、全局分析(他会分析整个项目下跟你应用有关的模块)、code-splitting(代码分割)。
2.什么是entry、output、 loader、plugin?
入口起点(entry point):指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，webpack 会找出有哪些模块和 library 是入口起点（直接和间接）依赖的。
output : 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
loaders : webpack 自身只支持 JavaScript。而 loader 能够让 webpack 处理那些非 JavaScript 文件，并且先将它们转换为有效 模块，然后添加到依赖图中，这样就可以提供给应用程序使用。
plugin : 用来自定义打包过程的方式，一个插件一定含有apply方法，通过这个方法参与到整个打包流程。插件可以用于执行范围更广的任务，插件的范围包括：打包优化、资源管理和注入环境变量。
3.什么是bundle,chunk,module？
https://stackoverflow.com/questions/42523436/what-are-module-chunk-and-bundle-in-webpack
bundle.png
module是开发中的单个模块。chunk是webpack进行模块的依赖分析时候，代码分割出来的代码块。bundle是由webpack打包出来的最终文件。
4. webpack运行加载
webpack的id 有两种 一种为 chunkId 一种为moduleId
webpack的工作步骤如下：
（1）从入口文件开始递归地建立一个依赖关系图。
（2）把所有文件都转化成模块函数。
（3）根据依赖关系，按照配置文件把模块函数分组打包成若干个bundle。
（4）通过script标签把打包的bundle注入到html中，通过manifest文件来管理bundle文件的运行和加载。
三个主要函数webpackJsonpCallback，webpack_require和webpack_require.e
webpackJsonpCallback(chunkIds, moreModules, executeModules){…}是bundle文件的包裹函数。bundle文件被加载后就会运行这个函数。函数的三个参数分别对应三种模块。chunkIds指的是需要单独加载的模块的id，对应installedChunks；executeModules指的是需要立即执行的模块函数的id，对应modules，一般是入口文件对应的模块函数的id；moreModules包括该bundle打包的所有模块函数。webpackJsonpCallback先把模块函数存到modules对象中；然后处理chunkIds，调用resolve来改变promise的状态；最后处理executeModules，把对应的模块函数转化成模块对象。
webpack_require(moduleId)通过运行modules里的模块函数来得到模块对象，并保存到installedModules对象中。
webpack_require.e(chunkId)通过建立promise对象来跟踪按需加载模块的加载状态，并设置超时阙值，如果加载超时就抛出js异常。如果不需要处理加载超时异常的话，就不需要这个函数和installedChunks对象，可以把按需加载模块当作普通模块来处理。
webpack打包原理和manifest文件分析
webpack打包原理
5.webpack-dev-server和http服务器如nginx有什么区别？
webpack-dev-servers使用内存来储存webpack开发环境下的打包文件，并且可以使用模块热更新，比传统http服务对开发更加高效。
6.模块热更新？
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除[模块]，而无需重新加载整个页面。显著加快开发速度
模块热替换
Webpack与browser-sync热更新原理深度讲解
7. 什么是tree-shaking（摇晃树）?
tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。
8. 优化打包速度
分开vender和app使用插件：DllPlugin和DllReferencePlugin
UglifyJsPlugin只要传入parallel（平行线程处理）和cache（缓存）参数
HappyPack，HappyPack.ThreadPool（线程池）
babel-loader：options.cacheDirectory，include，exclude加入参数提高速度
减少resolve，DevTool：去除sourcemap，cache-loader
网友评论