参考资料：

什么是webpack?

webpack是“模块打包机”，能够分析我们的项目结构，找到JS模块和一些浏览器无法直接运行的拓展语言（Sass、TypeScript），将其转化、打包为浏览器能够使用的格式。

Source Maps：

有时候我们打包后的文件若出错则不容易调试，使用Source Maps能让我们知道对应源代码出错的位置，更容易调试。

Loader:

使用loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理。
譬如：Sass转CSS，ES6语法的JS转为浏览器可兼容的JS，React的JSX转为JS
用到的工具或脚本：

  • Babel：是一个JS编译平台。作用：让ES6、ES7转为浏览器兼容的语法；可使用拓展的语言，如React的JSX，之后会帮助转为JS。
  • css-loader 和 style-loader

  • CSS预处理器：Sass和Less之类的预处理器，是对原生CSS的扩展，能使用类似于variables,nesting,mixins等不存在于css中的特性来写css。CSS预处理器将这些特殊类型语句转化为浏览器能识别的CSS语句。

    • 常用的CSS预处理器：Less Loader, Sass Loader, Stylus Loader

      插件(Plugins):

      插件是用来扩展webpack的功能的，会在整个构建过程中生效，并执行相应的任务。与Loader不同，Loader是对打包构建过程中对源文件进行处理，Plugins是在整个构建过程都起作用。
      用到的一些插件：

  • HtmlWebpackPlugin：根据模板自动生成index.html

  • BannerPlugin：添加版权声明的插件
  • Hot Module Replacement：允许修改组件代码后，自动刷新实时预览效果
    产品阶段的构建所用的一些优化插件：在产品阶段还需要对打包的文件进行额外的处理，如优化、压缩、缓存、分离CSS和JS。
  • 优化插件：OccurenceOrderPlugin（为组件分配ID）、UglifyJsPlugin（压缩JS代码）、ExtractTextPlugin（分离CSS和JS）
  • 缓存：CleanWebpackPlugin（清理build中的残余文件）

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

  1. bundle是由webpack打包出来的文件
  2. chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块

  3. module是开发中的单个模块。

    Webpack的构建流程？

  4. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数

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

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

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

  11. 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替

  12. 压缩代码。（development和production）
  13. 使用loader的时候，使用exclude排除node_modules中的文件
  14. 配置extractTextWebpackPlugin插件

  15. 使用TreeShaking插件：Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统CommonJS的同步require有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成为了可能，与运行时无关。（除那些引用的但却没有使用的代码）

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

  16. webpack-dev-server使用内存来存储webpack开发环境下的打包文件

  17. 并且可以使用模块热更新（使得代码修改过后不用刷新浏览器就可以更新）

  18. 他比传统的http服务对开发更加简单高效。

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

  19. 浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。

  20. 在webpack中可以在output中输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。

  21. 通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。

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

    答案：

  22. Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。

  23. 在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking JS
  24. Css需要使用Purify-CSS。