webpack那些事

1. 什么是webpack

webpack是打包模块化js的工具，在 webpack中一切文件皆模块，输出由多个模块组成的文件。
webpack也可以看成是一个模块打包机，首先分析项目结构，找到js模块以及浏览器无法运行的拓展语言如（scss,ts）等将其打包成合适的格式供浏览器使用。

2 loader和plugin

loader：模块转换器； webpack只能解析js文件，loader让webpack拥有加载和解析非js文件的能力。在module.rules中配置，作为模块的解析规则而存在，类型为一个数组，每一项是一个Object，描述了对于什么文件使用什么loader加载和什么参数options。

plugin: 在webpack构建中特定时机注入扩展逻辑，让其具有更多的灵活性，在webpack运行的生命周期中会广播许多事件，plugin会监听这些事件，在合适的时机通过webpack提供的api改变输出结果。在plugins中单独配置，类型为数组，每一项为plugin实例，通过构造函数传入。

3 常用的loader

• file-loader 把文件输出到一个文件夹中，通过对应的url引用输出的文件
• url-loader 和file-loader类似，当文件很小时，以base64的方式把文件注入到代码中去
• image-loader 加载并压缩图片文件
• babel-loader 把ES6转化成ES5
• css-loader 加载css，支持模块化，压缩，文件导入等功能
• style-loader 把css注入到js中，通过操作dom来改变样式
• awesome-typescript-loader 把ts转化成js，性能优于ts-loader
• postcss-loader 扩展css语法，使用下一代css,可以配合autoprefixer插件自动补齐css3前缀

4 常见的plugin

• define-plugin 定义环境变量
• commons-chunk-plugin 提取公共代码
• terser-webpack-plugin 支持压缩ES6
• ignore-plugin 忽略部分文件
• html-webpack-plugin 简化HTML文件的创建
• mini-css-extract-plugin 分离样式文件，把css提取为独立文件，按需加载
• serviceworker-webpack-plugin 增加离线缓存功能
• clean-webpack-plugin 删除打包文件
• happypack 多线程加速编译

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

• 压缩代码如用mini-css-extract-plugin
• 删除死代码如JS 用Tree-Shaking, CSS用purify-css
• 提取公共代码如用commons-chunk-plugin
• 利用CDN加速，把应用过程中的静态资源，换成CDN上的对应路径

6 webpack 热更新

其实是基于webpack-dev-server，当代码进行修改并保存后，将会对代码进行重新打包，将改动的模块发到浏览器端，浏览器用新的模块替代旧的模块，实行局部更新而非整体的刷新页面。