webpack面试题

0.为什么要对项目打包/编译/构建？

1. es5 以上的代码 转成 es5
2. ts 转成 js
3. jsx模板编译 转成 js
4. less/sass 转 css
5. Js/css/图片 文件合并
6. 代码压缩
7. 针对不同环境生成不同的代码

• 一般使用webpack来对项目打包/编译/构建

1. webpack能干什么

把模块开发所创建的文件打包成一整份文件

可以分析模块开发时所配置的文件依赖，使打包好的文件可以有序的执行

提供各种loader，可以处理各种非js类型的资源文件，一并构建打包。

可以通过插件处理一些额外的功能。

提供一个开发服务器，方便开发过程中在服务器环境中预览页面，实现免刷新，热替换等功能

2. webpack的认识

webpack是一款模块加载器兼打包工具，它能把各种资源都作为模块来使用和处理，通过使用Webpack解析出模块之间的依赖，将代码打包。

webpack 五个核心概念：

1. Entry
   入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

2. Output
   输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

3. Loader
   Loader：让 webpack 能够去处理一些文件，比如样式文件、图片文件

4. Plugins
   插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
   一直到重新定义环境中的变量等。

5. Mode
   模式(Mode)：指示 webpack 使用相应模式的配置。

   参数有：

   development–能让代码本地调试运行的环境

   production–能让代码优化上线运行的环境

3. webpack构建流程

3.1. 初始化参数： 合并shell或配置文件的参数，得出最总的参数

3.2. 开始编译：用合并得到的参数初始化compiler对象，加载所有配置文件，执行对象的run 方法，开始编译。

3.3. 确定入口，通过entry找到入口文件

3.4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理

3.5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系

3.6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表

3.7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中

4. module chunk bundle的区别

module–各个源码文件， webpack中一切皆模块

chunk–多模块合并成的代码

bundle-- 最终的输出文件，一般一个chunk对应一个bundle

5. 有哪些常见的Loader？他们是解决什么问题的？

style-loader 将css添加到DOM的内联样式标签style里

css-loader 将css文件变成commonjs模块加载js中

less-loader 处理less 转化为css

sass-loader 处理sass 转化为css

postcss-loader 用postcss来处理CSS

url-loader 处理图片资源

html-loader 处理html文件的图片

file-loader可以用来帮助webpack打包处理一系列的文件

babel-loader 用babel将ES6文件转换为ES5

eslint-loader：通过 ESLint 检查 JavaScript 代码

6. 有哪些常见的Plugin？他们是解决什么问题的？

html-webpack-plugin 基本作用就是生成html文件

mini-css-extract-plugin 提取js中的css成单独文件

define-plugin：定义环境变量

commons-chunk-plugin：提取公共代码

7. loader、plugin的区别

loader 原生的wenpack 只有解析js 的能力，loader就是让webpack 有了解析其他文件格式能力

plugin 是webpack 的插件，让其有更大的灵活性，在webpack 运行的周期中，会广播出多个事件，plugin则监听这些事件，改变webpack 的api 输出。

原文地址：https://blog.csdn.net/acm_cn1234567890/article/details/113407606