忽然发现一篇面试的好文章 juejin.cn/post/695791…
文中的面试题来源于上文，只是在这里补充答案，仅供大家学习
一面
webpack 中 hash、 chunkHash 与 contentHash 区别；
| hash | chunkHash | contentHash | |
|---|---|---|---|
| 变更机制 | 就是说只要构建编译过程中只要一个文件修改了，则整个项目的hash值都会统一改变 | 根据入口entry配置文件来分析其依赖项并由此来构建该entry的chunk，并生成对应的hash值 | 由文件内容产生的hash值，内容不同产生的contenthash值也不一样 |
| 影响范围 | 整个项目 | 当前入口文件最终打包出来的js文件 | 针对当前文件的内容 |
| 编译结果 | 整个项目的hash值是一样的，一变全变 | 当前文件及依赖hash值一样 | 当前文件有自己的hash，常用于图片和css（默认配置） |
参考地址：www.jianshu.com/p/6d81adb31…
写过 webpack 的 loader 和 plugin 么；
| loader | plugin | |
|---|---|---|
| 定义 | webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。 | loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。 |
| 白话 | 将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。 | 基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务 |
| 职能 | 让webpack能够处理非js文件(自身只支持js和json) | 打包优化、压缩、资源管理，注入环境变量。 |
| 举例 | css-loader、style-loader、postcss-loader、sass-loader | uglify-webpack-plugin、clean-webpack-plugin、babel-polyfill |
- entry：一个可执行模块或者库的入口。
- chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk，这是打包。
- loader：文件转换器。例如把es6转为es5，scss转为css等
- plugin：扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook，添加功能。
编写loader和plugin暂时不会
webpack 处理 image 是用哪个 loader，限制成 image 大小的是...；
webpack 将 css 合并成一个；
webpack 的摇树对 commonjs 和 es6 module 都生效么，原理是；
实现一下「模版字符串」功能；
const template = '我叫{{name}}，今年{{age}}岁。'
const context = {
name: 'zhenjianyu',
age: 26
}
function render(template, context) {
Object.keys(context).forEach(key => {
template = template.replace(new RegExp(`{{${key}}}`, 'g'), context[key])
})
return template
}
console.log(render(template, context))
