一、概念：
概念问题一、什么是webpack和grunt和gulp有什么不同 ？
答案：webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting（代码分割）、模块化(AMD,ESM,CommonJs)、全局分析
概念问题二、什么是bundle，什么是chunk，什么是module？
答案：bundle是由webapck最终打包出来的文件，chunk（webpack打包过程中）是指webpack在进行模块的额依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块。
概念问题三、什么是Loader？什么是Plugin？
答案：Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中。
Plugin是用来自定义webpack打包过程的的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webapck打包的各个流程（生命周期）。
二、配置：
配置问题：如何可以自动生成webpack配置？
答案：webapck-cli / vue-cli / etc..脚手架工具
三、开发：
开发问题一、webpack-dev-server和http服务器如nginx有什么区别？
答案： webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新。它比传统http服务对开发更加简单高效。 就是express
开发问题二、什么是模块热更新？
答案：模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。是通过websocket通道做到的。就是将修改的这部分代码从新执行一边，而不是重新刷新浏览器。
四、优化：
优化问题一、什么是长缓存？在webpack中如何做到长缓存优化？
答案：浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码。最方便和最简单的就是引入新的文件名称。在webpack中可以在output给输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NamedModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。
优化问题二、什么是Tree-shaking?CSS可以Tree-shaking吗？
答案：Tree-shaking是指在打包中去除那些引入了，但是在代码中没有别用到的那些死代码、在webpack中Tree-shaking是通过uglifyJSPlugin来Tree-shaking JS.CSS需要使用Purify-CSS
网友评论