面试重点：webpack

持续更新中...

面试传送门:

• 面试题：HTTP
• 面试题：HTML+CSS
• 面试题：JS
• 面试题：Vue
• 面试问题：接招人事(非技术性问题)

webpack

熟练掌握Webpack的经常使用配置,可以本身构建前端环境,并进行项目优化;

001.谈谈你对webpack的见解:

webpack是一个模块打包工具，可使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它能够很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不一样类型的依赖，webpack有对应的模块加载器，并且会分析模块间的依赖关系，最后合并生成优化的静态资源。

002.webpack的基本功能和工做原理？

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等 代码分割：提取多个页面的公共代码、提取首屏不须要执行部分的代码让其异步加载 模块合并：在采用模块化的项目有不少模块和文件，须要构建功能把模块分类合并成一个文件 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器 代码校验：在代码被提交到仓库前须要检测代码是否符合规范，以及单元测试是否经过 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

003.webpack构建过程：

从entry里配置的module开始递归解析entry依赖的全部module 每找到一个module，就会根据配置的loader去找对应的转换规则 对module进行转换后，再解析出当前module依赖的module 这些模块会以entry为单位分组，一个entry和其全部依赖的module被分到一个组Chunk 最后webpack会把全部Chunk转换成文件输出 在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑

004.webpack打包原理:

将全部依赖打包成一个bundle.js，经过代码分割成单元片断按需加载

005.什么是entry,output?

entry 入口，告诉webpack要使用哪一个模块做为构建项目的起点，默认为./src/index.js output 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

006.什么是loader，plugins?

loader是用来告诉webpack如何转换某一类型的文件，而且引入到打包出的文件中。 plugins(插件)做用更大，能够打包优化，资源管理和注入环境变量

007.什么是bundle,chunk,module?

bundle是webpack打包出来的文件，chunk是webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块

008.npm打包时须要注意哪些？如何利用webpack来更好的构建？

009.有哪些常见的Loader？他们是解决什么问题的？

file-loader：把文件输出到一个文件夹中，在代码中经过相对 URL 去引用输出的文件url-loader：和 file-loader 相似，可是能在文件很小的状况下以 base64 的方式把文件内容注入到代码中去source-map-loader：加载额外的 Source Map 文件，以方便断点调试image-loader：加载而且压缩图片文件babel-loader：把 ES6 转换成 ES5css-loader：加载 CSS，支持模块化、压缩、文件导入等特性style-loader：把 CSS 代码注入到 JavaScript 中，经过 DOM 操做去加载 CSS。eslint-loader：经过 ESLint 检查 JavaScript 代码

010.webpack规范:

webpack默认遵循commonjs规范 module.exports
es6中的规范 export
使用webpack进行打包时有两种模式：
开发模式：
生产模式：要压缩 若是没有插件 就不会压缩
默认状况下webpack的配置文件叫webpack.config.js，能够经过--config指定webpack的配置文件名

011.流程：

尝试配置脚手架：能够

012.loader:

css须要两个loader来处理：css-loader style-loader postcss-loader 有动画 目的就是使用浏览器的兼容。 -webkit-transform: rotate(45deg); transform: rotate(45deg); mini-css-extract-plugin 之前都是之间引入内部样式，把css专门打包成一个css文件，在index.html文件中引入css
optimize-css-assets-webpack-plugin css压缩
terser-webpack-plugin css压缩 js不能压缩了 而后由来一个插件 能压缩js file-loader 是让webpack打包图片 url-loader可让图片转化base64，也可让webpack打包图片

webpack 默认状况下 不支持js的高级语法 。 babel转化 npm i @babel/core @babel/preset-env babel-loader --save-dev

013.plugins:

html-webpack-plugin 根据模块生成一个html文件 此时不会在dist文件夹下面 新建index文件了 我须要 在public新建 新建index文件 根据这个模板文件 在内存中生成 index.html 而后自动引入bundle.js clean-webpack-plugin 去掉没有用到的模块

013.面试问题：

• loader是使webpack拥有加载和解析非js文件的能力
• plugin 能够扩展webpack的功能，使得webpack更加灵活。能够在构建的过程当中经过webpack的api改变输出的结果