webpack面试题

谈谈你对webpack的看法：

webpack是一个模块打包工具，他可以管理项目中的模块依赖，并编译输出模块所需的静态文件。webpack可以很好的管理、打包开发中所用到的HTML、CSS、JavaScript和静态文件（图片、字体），让开发更高效。对于不同类型的依赖，webpack有不同的模块加载器，而且会分析模块间的依赖关系，最终合并生成优化的静态资源

webpack的基本功能和实现原理：

1）代码转换：TypeScript编译成JavaScript，SCSS编译成CSS等
2）文件优化：压缩JavaScript、HTML、CSS代码，压缩合并图片等
3）代码分割：提取多个页面的公共代码，提取首屏不需要执行的部分代码，使其异步加载
4）模块合并：采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
5）自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
6）代码校验：在代码被提交到仓库前检测代码是否符合规范，以及单元测试是否通过
7）自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统

webpack构建过程

1）从entry里配置的module开始递归解析entry依赖的所有module
2）每找到一个module，都会根据配置的loader去找对应的转换规则
3）对module进行转换，再解析出当前module依赖的module
4）这些模块以entry为单位，一个entry和其所有依赖的module被分到一个Chunk
5）最后webpack会把所有Chunk转换为文件输出
6）在整个流程webpack会在恰当的时机执行plugin里定义的逻辑

webpack打包原理

将所有依赖打包成bundle.js，通过代码分割成单元片段按需加载

什么是webpack，与gulp，grunt有什么区别

1）webpack是一个模块打包工具，可以递归地打包项目中的所有模块，最终生成几个打包后的文件
2）区别：webpack支持代码分割，模块化（AMD，CommonJ，ES2015），全局分析

什么是entry，output？

1）entry入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
2）entry出口，告诉webpack在哪里输出打包好的代码以及如何命名，默认./dist

什么是loader，plugins？

1）loader是用来告诉webpack如何转换一个类型的文件，并引入到打包出的文件中
2）plugins(插件)可以打包优化，资源管理和注入环境变量

什么是bundle，chunk，module？

bundle是webpack打包出来的文件，chunk是webpack在模块的依赖分析时，代码分割出来的代码块。module是开发中的单个模块

webpack-dev-serve和http服务器如nginx有什么区别？

webpack-dev-serve使用内存来存储webpack开发环境下的打包文件，并可以使用模块热更新，相比传统的http服务器更加简单高效

什么是模块热更新？

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

使用过webpack里面哪些plugin和loader

loader：
        1）babel-loader：将ES6转为ES5
        2）css-loader，style-loader：解析CSS文件，能够解释@import url( )等
        3）file-loader：直接输出文件，把构建后的文件路径返回，可以处理很多类型的文件
        4）url-loader：打包图片
plugin：
        html-webpack-plugin：压缩html
        clean-webpack-plugin：打包器清理源目录文件，在webpack打包器清理dist目录

webpack中babel的实现

1）安装npm i -D @babel-preset-env @babel-core babel-loader
        @babel-preset-env：可以使我们灵活设置代码目标执行环境
        @babel-core：babel核心库
        babel-loader：webpack的babel插件，让我们可以在webpack中运行babel

2）配置babelrc

{
    "presets":['@babel/preset-env']
}

3）配置webpack.config.js