webpack 有哪些优化手段（可用于生产环境）？/webpack 提高构建速度的方式

10-1

1. 前端为何要进行打包和构建？

2. module、chunk 和 bundle的区别？

3. loader 和 plugin 的区别？

一、webpack的打包原理

  1. 识别入口文件
  2. 通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)
  3. webpack做的就是分析代码，转换代码，编译代码，输出代码
  4. 最终形成打包后的代码

二、什么是loader
loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中

  1. 处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行
  2. 第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码

三、什么是plugin
在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。
四、loader和plugin的区别
对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的文件转换过程
plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

4. 常见loader 和 plugin 有哪些？

loader

  • babel-loader /.(jsx?|babel|es6)$/
  • ts-loader /.tsx?$/
  • [‘style-loader’, ‘css-loader’] /.css$/
  • postcss-loader
  • vue-loader /.vue$/
  • url-loader /.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/
  • image-loader
  • json-loader
  • svg-inline-loader
  • raw-loader
  • file-loader
  • 校验 eslint-loader \ tslint-loader /.ts$/
  • mocha-loader
  • i18n-loader
  • cache-loder
  • sourec-map-loader
  • expose-loader

plugin


  • loader 输入什么产出什么 ？

如何写一个 webpack plugin

知道 webpack 中的 devTool 吗？


为什么有时候配置了 webpack caching，chunk 还是更新了？

10-2

1. babel 和 webpack 的区别？

1. 如何产出一个lib？

1. babel-polyfill 和 babel-runtime 区别？

1. webpack 如何实现懒加载？

1. 为何Proxy 不能被Polyfill ?

10-3

10-4

webpack的构建过程?/webpack生命周期

image.png

wbpack微内核源码

webpack 打包分包的依据怎么判定

webpack 原理

webpack 动态加载的原理

webpack 的缺点，让你设计一个新的构建打包工具，你会怎么设计？

HMR

webpack 热更新

关于HMR说法正确的是？(多选)

A.Hot Module Replacement简称HMR，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。

B.webpack 可以将不同的模块打包成 bundle 文件或者几个 chunk 文件，但是当我通过 webpack HMR 进行开发的过程中，在dist目录中找不到打包好的文件

C.使用 HMR 的过程中，通过 Chrome 开发者工具我知道浏览器是通过 websocket 和 webpack-dev-server 进行通信的，在websocket 的 message 中可以发现新模块的代码

D.在 webpack HMR 功能之前，已经有很多 live reload 的工具或库，比如 live-server，这些库监控文件的变化，然后通知浏览器端刷新页面，但是live reload 工具并不能够保存应用的状态（states），当刷新页面后，应用之前状态丢失。

答案：A B D

解析：

C 在websocket 的 message 中不会发现新模块的代码，更新模块的代码不直接通过 websocket 发送到浏览器端，而是通过 jsonp 来获取的

其他打包工具

rollup、gulp 的使用、应用场景