1、webpack有哪些功能？ 告诉我你对此有何理解？
如今的后端网页功能丰富，尤其是SPA（单页Web应用）技术普及之后。 JavaScript 变得不再那么复杂，并且需要大量的依赖包。 它还需要处理Scss、Less...新风格的扩展写作的编译。 工作。
所以现代后端已经完全依赖于webpack的辅助了。
当今最流行的三个后端框架可以说都与webpack有着紧密的联系。 框架官方推出了依赖自家框架的webpack重构工具。
反应.js+WebPack
vue.js+WebPack
AngluarJS+WebPack
2. webpack是如何工作的？
WebPack 可以看作是一个模块打包器：它所做的就是分析你的项目结构，找到 JavaScript 模块和其他浏览器无法直接运行的扩展语言（Sass、TypeScript 等），并将它们转换打包成供浏览器使用的适当格式。 3.0出现后，Webpack也承担起了优化项目的责任。
3.Webpack打包原理
将所有内容视为一个模块：无论是 css、JS、Image 还是 HTML，它们都可以互相引用。 通过定义entry.js，跟踪所有依赖文件，并通过loader和plugin处理每个模块，然后打包在一起。
按需加载：在打包过程中，Webpack 使用 CodeSplitting 功能将文件分成多个块。 重复的部分也可以单独提取为commonChunk，实现按需加载。将所有依赖打包成一个bundle.js文件，通过代码拆分成单元片段，按需加载
4、webpack的核心概念 5、webpack的基本功能有哪些？ 6. gulp/grunt 和 webpack 有什么区别？
两者都是后端重构工具。 Grunt 和 gulp 早期比较流行。 现在webpack已经比较主流了，但是一些轻量级的任务还是由gulp来处理，比如单独打包CSS文件。
grunt 和 gulp 都是基于任务和流（Task、Stream）的。
与jQuery类似，找到一个文件（或一种类型的文件），对其执行一系列链式操作，并更新流上的数据。 整个链操作构成一个任务，多个任务构成整个网页创建过程。
webpack是基于入门的。
Webpack会在入口处手动递归地解析所有需要加载的资源文件，然后使用不同的Loader来处理不同的文件，并使用Plugin来扩展webpack的功能。
7. webpack 旨在解决什么问题？
如果以前开发时一个html文件可能引用了十多个js文件，那么顺序一定不能乱，因为它们之间存在依赖关系。 同时，对于ES6+等新句型，less、sass等CSS预处理也不能很好。 为了解决...，你需要一个工具来解决这个问题。
8、如何提高webpack预制组件的速度？
多个条目的情况下，使用CommonsChunkPlugin提取公共代码
通过externals配置提取常用库
借助DllPlugin和DllReferencePlugin预编译的资源模块，我们使用DllPlugin来处理这些
引用且绝不更改npm包进行预编译，然后通过DllReferencePlugin加载预编译模块。
使用Happypack实现多线程加速编译
使用 webpack-uglify-paralle 来提高 uglifyPlugin 的压缩率。
原理上，webpack-uglify-parallel 采用多核并行压缩来提高压缩率。
使用 Tree-shaking 和 ScopeHoisting 消除冗余代码
9. 打包npm时要注意什么？ 如何使用webpack更好的构建？
Npm 是目前最大的 JavaScript 模块存储库，拥有来自世界各地的开发人员上传的可重用模块。
您可能只是JS模块的用户，在某些情况下您可能会选择上传自己开发的模块。
您可以前往官网了解如何上传NPM模块。 这里我们只讲解如何使用webpack创建。
NPM模块需要注意以下问题：
为了支持CommonJS模块化规范，需要打包后的最终结果遵循这个规则。
Npm模块用户的环境不确定，可能不支持ES6，所以最终的打包结果应该使用ES5编译。 而且如果是ES5转换的话，最好和SourceMap一起上传。
npm包大小尽量小（有些仓库会限制包大小）
发布的模块不能将依赖模块打包在一起，应该允许用户自行有选择地安装。 这样可以防止模块用户重新打包时底层模块被重复打包。
UI组件类的模块还应该依赖于其他资源文件，例如.css文件，以包含在发布的模块中。
10、为什么前端需要打包构建？
代码级别：
开发流程级别：
11、webpack的创建过程是怎样的？ 尝试描述从读取配置到输出文件的过程。
Webpack的运行过程是一个串行过程。 从头到尾会执行以下流程：
在上面的过程中，Webpack会在特定的时间点广播特定的风暴。 插件监听到感兴趣的storm后会执行特定的逻辑，插件可以调用Webpack提供的API来改变Webpack的运行结果。
12. 如何配置单页应用程序？ 如何配置多页面应用程序？
单页应用可以理解为webpack的标准模式。 您可以在录入手中直接指定单页应用的录入。 我这里就不详细说了。
对于多页面应用，可以使用webpack的AutoWebPlugin来完成简单的手动创建，前提是项目的目录结构必须遵循其预设规范。 多页面应用程序中需要注意的事项是：
13、Loader机制有哪些作用？
默认情况下，webpack只能打包js文件。 配置中的 module.rules 链表配置了一组规则webpack css内容，告诉 Webpack 遇到文件时使用什么 Loader 来加载并转换为 js。
注意：
use属性的值需要是由Loader名称组成的字段webpack css内容，Loader的执行顺序是从后到先；
每个Loader都可以通过URL查询字符串的方式传入参数。 例如，css-loader中的minimize？minimize告诉css-loader启用CSS压缩。
14.常用装载机
css-loader 读取合并的 CSS 文件
style-loader 将 CSS 内容注入 JavaScript
sass-loader 解析sass文件（安装sass-loader、node-sass）
postcss-loader 手动添加浏览器兼容前缀（postcss.config 配置）
url-loader 将文件转换为 base64URI。
vue-loader 处理 vue 文件。
15. Plugin有哪些功能？
插件用于扩展Webpack的功能。 通过在创建过程中注入钩子，为Webpack带来了极大的灵活性。
Webpack通过plugins属性配置需要使用的插件列表。 插件属性是一个字段。 上面的每一项都是插件的一个实例。 实例化组件时，可以通过构造函数传入组件支持的配置属性。
16. 什么是bundle，哪个是chunk，哪个是模块？
Bundle：是webpack打包的文件
Chunk：指webpack进行模块依赖分析时从代码中划分出来的代码块
module：是正在开发的单个模块
17. 常用插件
HtmlWbpackPlugin打包后手动生成html文件并引入bundle.js
cleanwebPackPlugin打包手动删除之前的打包文件
18.ExtractTextPlugin插件的功能
ExtractTextPlugin插件的功能是将JavaScript代码中的CSS提取到一个单独的文件中。
为此，您可以使用插件的 filename 属性告诉插件 CSS 文件名输出是通过 [name]_[contenthash:8].css 字符串模板生成的。 上面的[name]代表文件名，[contenthash:8]代表根据文件内容计算出的8位哈希值，还有很多配置选项，可以在ExtractTextPlugin的主页上找到。
19.源图
是一种映射关系，将打包文件映射到源码，用于定位错误位置
配置方法：
例如： devtool:'source-map'
添加不同的前缀含义：
最佳实践：
开发环境：cheap-module-eval-source-map
线带环境：cheap-mudole-source-map
20.HMR热模块更新
使用 webpack.HotModuleReplacementPlugin()，devServer 启用热
场景一：只刷新css，不影响js
场景二：js中实现热更新，只更新指定的js模块
if (module.hot) {module.hot.accept(’./library.js’, function() {// Do something with the updated library module…});}
21、webpack如何配置多个入口文件？
entry: {home: resolve(__dirname, "src/home/index.js"),about: resolve(__dirname, "src/about/index.js")}
用于描述入口的对象。 您可以使用以下属性：
22. Babel相关：polyfill和runtime的区别、ESstage的含义、preset-env的作用等。
1.polyfill和runtime的区别
babel-polyfill的原理是，当运行环境中没有实现某些技能时，babel-polyfill会兼容。
babel-runtime 将 es6 编译成 es5 执行。 我们使用es6句型进行编译，最终会通过babel-runtime编译成es5。 也就是说，无论浏览器是否支持ES6，只要是ES6句型，都会被转码成ES5。 所以有很多冗余代码。
Babel-polyfill是通过在全局对象和外部对象的原型上添加方法来实现的。 例如，运行环境不支持Array.prototype.find方法。 如果引入polyfill，我们可以使用es6的方式来编译，缺点是会造成全局空间污染。
babel-runtime：不会污染全局对象和外部对象的原型。 例如，如果我们需要 Promise，我们只需要从 'babel-runtime/core-js/promise' 导入 Promise 即可。 这不仅可以防止污染全局对象，还可以减少任何必要的代码。
2.stage-x：指某个阶段的js语言提案
Stage0 - Idea (Strawman)：只是一个意见，也许使用 Babel 插件。
第一阶段提案：这值得跟进。
第二阶段草案：初始规范。
Stage3-Candidate：完成规范并初步在浏览器上实现。
Stage4 - 已完成：将在下一个年度版本发布中添加。
3.了解babel-preset-env
babel-preset-es2015：可以将es6代码编译成es5。
babel-preset-es2016：可以将es7代码编译为es6。
babel-preset-es2017：可以将es8代码编译为es7。
babel-preset-latest：支持所有现有 ECMAScript 版本的新功能
23. 什么是模块热更新？ 有什么优点？
模块热更新是webpack的一个功能，可以在不刷新浏览器的情况下提示代码更新。
它是在应用过程中通过替换、添加、删除模块来手动刷新浏览器而无需重新加载整个页面的中间版本。
优点：只更新发生变化的内容，节省宝贵的开发时间。调整样式提高了速度，几乎相当于在浏览器中修改样式。
24.lazyloading（模块延迟加载）
使用import()句式异步引入组件实现文件的懒加载：预取、预加载
webpack提倡编写更多的异步代码，以提高代码利用率，从而提高页面性能。
先加载主业务文件，预取利用网络空闲时间异步加载组件。
import(/* webpackPrefetch: true / ‘LoginModal’);preload与主业务文件一起加载，组件异步加载
import(/ webpackPreload: true */ ‘ChartingLibrary’);25.什么是长缓存？ webpack中如何实现长缓存优化？
当用户访问页面时，浏览器会存储用户访问的静态资源以提高加载速度，并且每次代码升级或更新时，浏览器都需要下载新的代码。 最方便、最简单的方法是更新方法，即引入新的文件名。
在webpack中，可以在输出文件中指定chunkhash，但将经常更新的代码和框架代码分开，并使用NameModulesPlugin或HashedModulesPlugin来保持重新打包的文件名不变。
26. 什么是树鲨攻击？
指的是从打包中去除代码中引入但未使用的死代码。 在wepack中，jstreeshaking是通过UglifyJsPlugin进行的，而在css中，则使用purify-CSS。
27. webpack-dev-server 和 http server 的区别
webpack-dev-server 使用显存存储 webpack 开发环境中的包文件，并且可以使用模块热更新，比传统的 http 服务对开发更有效。
28、webpack3和webpack4的区别
mode/--mode参数，新增了mode/--mode参数，表示是开发还是生产（development/Production）。 生产关注打包文件大小，开发关注goujiansud去除loader。 必须使用规则（在版本3中，加载器和规则共存，版本4中只允许使用规则），不仅移动了CommonsChunkPlugin（提取公共代码），还使用optimization.splitChunks和optimization.runtimeChunk来替换es6导出JSON文件的方法，并且可以过滤无用代码
