面试重点: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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章