# 1. webpack3和webpack4的区别？
1. mode/–mode参数: 新增了mode/--mode参数来表示是开发还是生产（development/production）; production 侧重于打包后的文件大小，development侧重于构建速度
2. 移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）
3. 移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
4. 支持es6的方式导入JSON文件，并且可以过滤无用的代码


# 2. 什么是webpack，和grunt和gulp有什么不同？
1. Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。
2. 他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。

# 3. 什么是bundle,什么是chunk，什么是module?
1. bundle是由webpack打包出来的文件
2. chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块
3. module是开发中的单个模块。


# 4. 什么是Loader?什么是Plugin?
1. loader是使wenbpack拥有加载和解析非js文件的能力
2. plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果


# 5. Webpack的构建流程？
1. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
2. 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
3. 确定入口，通过entry找到入口文件
4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中


# 6. 如何利用webpack来优化前端性能
1. 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
2. 压缩代码。（development和production）
3. 使用loader的时候，使用exclude排除node_modules中的文件
4. 配置extractTextWebpackPlugin插件
5. 使用TreeShaking插件：Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统CommonJS的同步require有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成为了可能，与运行时无关。（除那些引用的但却没有使用的代码）


```js
// 一、.babelrc 中添加
"presets": [
 [
   "es2015", {
     "modules": false,
   }
 ],
 "stage-2"
],
// 或者在babel loader中的options里面添加同样的代码, modules:false 表示的是不对ES6进行处理

// 二、使用uglifyjs-webpack-plugin
plugins: [
    new UglifyJsPlugin(),
...
]
```
> [!NOTE]
> 想要代码配置tree-shaking,必须采用es6的模块语法，因为es6的模块采用的是静态分析，也就是从字面量对代码进行分析。之前的require是动态分析，必须代码执行到才知道引用的什么模块。

# 7. 如何可以自动生成webpack配置？
答案： webpack-cli /vue-cli /etc ...脚手架工具

# 8. webpack-dev-server和http服务器如nginx有什么区别?
1. webpack-dev-server使用内存来存储webpack开发环境下的打包文件
2. 并且可以使用模块热更新
3. 他比传统的http服务对开发更加简单高效。


# 9. 什么是模块热更新？
答案:模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。

# 10. 什么是长缓存？在webpack中如何做到长缓存优化？
答案：
1. 浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。
2. 在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。
3. 通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。


# 11. 什么是Tree-shaking?CSS可以Tree-shaking吗？
答案：
1. Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。
2. 在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking JS
3. Css需要使用Purify-CSS。


【前端工程化】Webpack常见面试题

2. 什么是webpack，和grunt和gulp有什么不同？

3. 什么是bundle,什么是chunk，什么是module?

6. 如何利用webpack来优化前端性能

7. 如何可以自动生成webpack配置？

8. webpack-dev-server和http服务器如nginx有什么区别?

10. 什么是长缓存？在webpack中如何做到长缓存优化？

11. 什么是Tree-shaking?CSS可以Tree-shaking吗？