Webpack常见面试题

Webpack打包原理 webpack五大模块

Entry入口：以哪个文件为入口起点开始打包，分析构建内部依赖图

Output输出：指示Webpack打包后的资源bundles输出位置和命名

Loader加载器：让Webpack可以处理非js文件，比如样式文件，图片文件

Plugins插件：增强Webpack，打包优化，Gzip压缩，重新定义环境中的变量等

Mode模式：本地环境development 生产环境production

Webpack介绍

webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。

webpack就是识别你的 入口文件。识别你的 模块依赖，来打包你的代码。至于你的代码使用的是commonjs还是amd或者es6的import。webpack都会对其进行分析。来获取代码的依赖。

webpack做的就是分析代码。转换代码，编译代码，输出代码。webpack本身是一个node的模块，所以webpack.config.js是以commonjs形式书写的(node中的模块化是commonjs规范的)

2.解析点vue文件过程

vue-loader 会把.vue文件中的内容拆分为 template，script，style 三个“虚拟模块”，
然后分别匹配 webpack 配置中对应的 rules，比如 script 模块会匹配所有跟处理 JavaScript 或 TypeScript 相关的 loader。

Webpack打包构建流程

初始化参数
配置文件和Shell语句中读取与合并参数开始编译
根据参数初始化Compiler对象，加载配置插件，执行对象的run方法开始执行编译确定入口
根据配置中的entry找出所有的入口文件编译模块
调用所有配置的Loader对模块进行编译，再找到该模块的依赖的模块，在递归本步骤直到所有入口依赖的文件都本步骤处理完成模块编译
得到每个模块被翻译后的最终内容以及它们之间的依赖关系输出资源输出完成 2.模块热更新

模块热更新是webpack的一个功能，他可以使代码修改过后不用刷新就可以更新，是高级版的自动刷新浏览器

devServer中通过hot属性可以控制模块的热替换

3.如何提高webpack构建速度

1、通过externals配置来提取常用库

2、利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来

3、使用Happypack 实现多线程加速编译

要注意的第一点是，它对file-loader和url-loader支持不好，所以这两个loader就不需要换成happypack了，其他loader可以类似地换一下

4、使用Tree-shaking和Scope Hoisting来剔除多余代码 5、使用fast-sass-loader代替sass-loader 6、babel-loader开启缓存

5.babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率 可以加上cacheDirectory参数或使用 transform-runtime 插件试试

6.不需要打包编译的插件库换成全局"script"标签CDN引入的方式

8、优化构建时的搜索路径