Babel-loader ：转换ES6、ES7等JS新特性语法。
Css-loader：支持.css文件的加载和解析转换成commonjs对象
Style-loader：将样式通过<style>标签插入到head中
Less-loader ：将less文件转换成css
Ts-loader：将TS转换成JS
File-loader：进行图片、文字等的打包、富媒体文件、字体。
url-loader：处理图片和字体
Raw-loader：将文件以字符串的形式导入。
Thread-loader：多进程打包JS和CSS
CleanWebpackPlugin：清理构建目录
ExtractTextWebpackPlugin：将CSS从bundle文件里提取成独立的CSS文件
HtmlWebpackPlugin：创建html文件去承载输出的bundle
UglifyWebpackPlugin：压缩JS
PostCSS + autoprefixer： ⾃动补⻬ CSS3 前缀。
px2rem-loader：移动端 CSS px ⾃动转换成 rem。 ⻚⾯渲染时计算根元素的 font-size 值，可以使⽤⼿淘的lib-flexible库换成 rem。
热更新
HotModuleReplacementPlugin
原理：分为第一次打包和第二次打包，第一次打包将js代码打包成bundle.js传给Bundle Server然后让客户端可以以loacalhost8080这种服务器访问的方式访问。第二次，当我修改了代码之后，webpack会打补丁一样，将修改的部分打包，然后给到HMR server，这个服务器就会以字符串的形式，告诉HMR runtime，哪些地方被修改了，哪些地方需要更新。
文件指纹：用来做版本的管理，比如某个文件修改了，并不需要把所有的文件都
发布，只要发布修改了的那部分就行了。
文件指纹
Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改
Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会⽣成不同的 chunkhash 值
Contenthash：根据⽂件内容来定义 hash ，⽂件内容不变，则 contenthash 不变。
性能优化：
l JS压缩：内置了 uglifyjs-webpack-plugin，webpack4如果mode设置成production那么将会自动的进行压缩。
l CSS⽂件的压缩：使⽤ optimize-css-assets-webpack-plugin。同时使⽤ cssnano。
l HTML⽂件的压缩：html-webpack-plugin。
l 基础库分离：html-webpackexternals-plugin。思路：将 react、 react-dom 基础包通过 cdn 引⼊，不打⼊ bundle 中。
l 公共脚本分离：SplitChunksPlugin，分离⻚⾯公共⽂件。
l tree shaking(摇树优化)：个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到bundle ⾥⾯去， tree shaking 就是只把⽤到的⽅法打⼊ bundle ， 没⽤到的⽅法会在uglify 阶段被擦除掉。
l scope hoisting
现象：构建后的bundle.js代码存在⼤量闭包代码. 运⾏代码时创建的函数作⽤域变多，内存开销变⼤,⼤量作⽤域包裹代码，导致体积增⼤（模块越多越明显）
结论:被 webpack 转换后的模块会带上⼀层包裹。import 会被转换成 __webpack_require
分析：
· 打包出来的是⼀个匿名闭包
· modules 是⼀个数组，每⼀项是⼀个模块初始化函数
· 通过 WEBPACK_REQUIRE_METHOD(0) 启动程序
原理： 将所有模块的代码按照引⽤顺序放在⼀个函数作⽤域⾥，然后适当的重命名一些变量以防⽌变量名冲突。
对⽐：通过 scope hoisting 可以减少函数声明代码和内存开销。
l 代码分割：
对于⼤的 Web 应⽤来讲，将所有的代码都放在⼀个⽂件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使⽤到。 webpack 有⼀个功能就是将你的代码库分割成chunks（语块），当代码运⾏到需要它们的时候再进⾏加载。
懒加载：plugin-syntax-dynamic-import
服务端渲染：HTML + CSS + JS + Data -> 渲染后的 HTML。
所有模板等资源都存储在服务端，内⽹机器拉取数据更快，⼀个 HTML 返回所有数据
客户端渲染：多个请求（HTML，数据），HTML和数据串行加载、前端渲染。
服务端渲染： 一个请求，返回HTML和数据。核心是减少请求。
服务端渲染优势：减少⽩屏时间、对于 SEO 友好。客户端渲染刚开始拉下来的HTML其实是一个空的模板，而服务端渲染拉下来的时候页面就有数据比较丰富，有利于爬虫抓取数据。
思路：使⽤ react-dom/server 的 renderToString ⽅法将React 组件渲染成字符串，再把这个string丢到HTML模板里面去，服务端路由返回对应的模板。
做法：使⽤打包出来的浏览器端 html 为模板，在模板中设置占位符，动态插⼊组件，就可以解决样式不显示的问题。通过设置占位符，服务端获取数据然后替换占位符。
多页应用：每⼀次⻚⾯跳转的时候，后台服务器都会给返回⼀个新的 html ⽂档，这种类型的⽹站也就是多⻚⽹站，也叫做多⻚应⽤。glob.sync。