webpack面试题
1. webpack原理
从配置文件定义的模块列表开始,处理应用程序,从入口文件开始递归构建一个依赖图,然后将所有模块打包为少量的bundle,通常只有一个,可由浏览器加载。
2.webpack的优势
(1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
(2)能被模块化的不仅仅是 JS 了。
(3) 开发便捷,能替代部分 grunt/gulp的工作,比如打包、压缩混淆、图片转base64等。
(4)扩展性强,插件机制完善
3.什么是loader及理解
(1) loader用于加载某些资源文件。因为webpack本身只能打包common.js规范的js文件,对于其他资源如css,img等,是没有办法加载的,这时就需要对应的loader将资源转化,从而进行加载。
(2)在webpack.config.js中指定loader。module.rules可以指定多个loader,对项目中的各个loader有个全局概览。
(3) loader是运行在NodeJS中,可以用options对象进行配置。plugin可以为loader带来更多特性。loader可以进行压缩,打包,语言翻译等等。
(4)loader从模板路径解析,npm install node_modules。也可以自定义loader,命名XXX-loader。
(5)语言类的处理器loader:CoffeeScript,TypeScript,ESNext(Bable),Sass,Less,Stylus。任何开发技术栈都可以使用webpack。
4.常用loaders
(1)加载scc style-loader、css-loader、less-loader和sass-loader(文件打包解析css less sass),转换成css
npm install --save-dev style-loader css-loader less-loader sass-loader
(2)加载图片和字体等文件 raw-loader、file-loader 、url-loader
npm install --save-dev file-loader raw-loader url-loader
(3)加载数据xml和csv csv-loader xml-loader (打包加载解析csv和xml文件数据)
npm install --save-dev csv-loader xml-loader
(4)校验测试:mocha-loader、jshint-loader、eslint-loader
npm install --save-dev mocha-loader jshint-loader eslint-loader
(5)编译:babel-loader、coffee-loader、ts-loade
npm install --save-dev babel-loader coffee-loader ts-loade
5.什么是plugin
plugin用于扩展webpack的功能。不同于loader,plugin的功能更加丰富,比如压缩打包,优化,不只局限于资源的加载。
webpack插件,采用不同的plugin完成各类不同的性需求,热更新,css去重之类的问题
HtmlWebpackPlugin:会在打包结束之后自动创建一个index.html, 并将打包好的JS自动引入到这个文件中。
clean-webpack-plugin:在打包之前将我们指定的文件夹清空。应用场景每次打包前将目录清空, 然后再存放新打包的内容, 避免新老混淆问题,非官方功能。
copy-webpack-plugin:打包相关的文档。除了JS/CSS/图片/字体图标等需要打包以外, 可能还有一些相关的文档也需要打包(word等)。文档内容是固定不变的, 我们只需要将对应的文件拷贝到打包目录中即可。
mini-css-extract-plugin:是一个专门用于将打包的CSS内容提取到单独文件的插件。前面我们通过style-loader打包的CSS都是直接插入到head中的。
terser-webpack-plugin:压缩js代码
optimize-css-assets-webpack-plugin:压缩css代码
image-webpack-loader或img-loader:压缩图片。
watch:webpack 可以监听打包文件变化,当它们修改后会重新编译打包
webpack-dev-server:
webpack-dev-server和watch一样可以监听文件变化,两者不要同时配置,防止冲突。
webpack-dev-server可以将我们打包好的程序运行在一个服务器环境下
webpack-dev-server可以解决企业开发中"开发阶段"的跨域问题
可以监听css,js代码且能自动刷新
7.webpack-dev-middleware 与 webpack-dev-server 关系
简单理解 webpack-dev-server主要是express + webpack-dev-middleware + webpack-hot-middleware
8.webpack-dev-server 和 http服务器的区别
webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,比传统的http服务对开发更加有效。
9.什么是长缓存?在webpack中如何做到长缓存优化?
浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称。
在webpack中,可以在output给出输出的文件制定chunkhash,并且分离经常更新的代码和框架代码,通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。
10.什么是Tree-sharking?
tree-sharking 是指在打包中去除那些引入了,但是在代码中没有被用到的那些死代码。