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、优化构建时的搜索路径