webpack面试题

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的功能更加丰富，比如压缩打包，优化，不只局限于资源的加载。

6.常用plugins

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 是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。