Webpack 面试题

1、前端代码为何要进行构建和打包

答案：

代码方面：

• 体积更小（Tree-Shaking、压缩、合并），加载更快
• 编译高级语言或语法（TS,ES6+,模块化，scss）
• 兼容性和错误检查（Polyfilll, postcss, eslint）

　　研发流程方面：

• 统一、高效的开发环境
• 统一的构建流程和产出标准
• 集成公司构建规范（体测、上线等）

2、module、chunk、bundle分别是什么意思，有何区别

答案：

• module -- 各个源码文件，webpack 中一切皆模块
• chunk -- 多模块合并成的，如 entry import() splitChunk
• bundle -- 最终的输出文件

3、loader 和 plugin 的区别

答案：

loader：模块转换器，如 less --> css, 如识别 js 结尾的，css 结尾的，图片格式结尾的，通过 loader 转换成相应的文件格式

plugin：扩展插件，如 HtmlWebpackPlugin

常见 loader 和 plugin：

https://www.webpackjs.com/loaders/，

本人在项目中常用到的loader有

1. babel-loader -- This package allows transpiling JavaScript files using Babel and webpack.
2. css-loader -- css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。引用资源的合适 loader 是 file-loader和 url-loade
3. expose-loader -- The expose loader adds modules to the global object. This is useful for debugging, or supporting libraries that depend on libraries in globals.，模块必须在你的 bundle 中被 require() 过
4. file-loader -- Instructs webpack to emit the required object as file and to return its public URL
5. json-loader -- 注意：由于 webpack >= v2.0.0 默认支持导入 JSON 文件。如果你使用自定义文件扩展名，你可能仍然需要使用此 loader。See the v1.0.0 -> v2.0.0 Migration Guide for more information
6. less-loader -- Compiles Less to CSS.
7. postcss-loader -- Loader for webpack to process CSS with PostCSS
8. style-loader --  Adds CSS to the DOM by injecting a <style> tag
9. url-loader -- Loads files as base64 encoded URL

https://www.webpackjs.com/plugins/

本人在项目中常用的 plugin 有：

1. HtmlWebpackPlugin（html-webpack-plugin） -- HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader
2. ExtractTextWebpackPlugin（extract-text-webpack-plugin）-- Extract text from a bundle, or bundles, into a separate file.
3. CopyWebpackPlugin（copy-webpack-plugin）-- Copies individual files or entire directories to the build directory
4. UglifyjsWebpackPlugin（uglifyjs-webpack-plugin）-- This plugin uses UglifyJS v3 (uglify-es) to minify your JavaScript
5. DllPlugin -- DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。
6. IgnorePlugin -- 防止在 import 或 require 调用时，生成以下正则表达式匹配的模块：

• • • requestRegExp 匹配(test)资源请求路径的正则表达式。
    • contextRegExp （可选）匹配(test)资源上下文（目录）的正则表达式。

4、babel 和 webpack 的区别

答案：

• Babel --> JS 新语法编译工具，不关心模块化
• webpack --> 打包构建工具，是多个 loader plugin的集合

5、webpack 如何实现懒加载

答案：

import()

结合Vue React 异步组件

结合vue-router React-router 异步加载路由

6、为何 Proxy 不能被 Polyfill

答案：

如class 可以用 function 模拟

如 Promise 可以用 callback 模拟

但 Proxy 的功能用 Object.defineProperty 无法模拟（没有任何一个语法可以模拟 Proxy）

7、如何产出一个lib

答案：

 

 

8、webpack 常见性能优化

答案：

• webpack 优化构建速度（可用于生产）

1. 优化 babel-loader
2. IgnorePlugin
3. noParse
4. happyPack
5. ParallelUgligyPlugin

• webpack 优化构建速度（不可用于生产）

1. 自动刷新
2. 热更新
3. DllPlugin

• webpack 优化产出代码

1. 小图片 base64 编码
2. bundle 加 hash
3. 懒加载
4. 提取公共代码
5. 使用 CDN 加速
6. IgnorePlugin
7. 使用 Production
8. Scope Hosting

9、babel-runtime 和 babel-polyfill 的区别

答案：

• babel-polyfill 会污染全局
• babel-runtime 不会污染全局
• 产出第三方 lib 要用 babel-runtime