关于webpack的一些记录

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

webpack基础配置

• entry（入口）：webpack从哪个/哪些文件打包
• output（输出）：webpack打包完的文件输出到哪里，如何命名等
• loader（加载器）：webpack本身只能处理js、json等资源，其他资源需要借助loader来解析
• plugin（插件）：拓展webpack的功能
• mode（模式）：开发模式（development）、生产模式（production）

开发模式的一些配置

开发模式下配置一些基础配置（也就是平时开发React、Vue项目的脚手架）：

• 配置entry： 打包文件路径
• 配置output： 输出文件，文件别名等
• 配置loader和plugin：在module的rules里配置处理html、css、js、图片等
  • 处理css用css、less、sass等loader（postcss处理兼容）
  • HtmlWebpackPlugin处理html
  • 处理图片（webpack4是用file-loader、url-loader，webpack5是内置的直接配置规则type为asset，asset/sresource处理字体/其他资源等
  • 配置EslintWebpackPlugin使用include/exclude打包处理文件过滤，开启cache等
  • 使用babel处理js（@babel/prese-envt处理兼容）
  • devtool配置source map
  • 配置splitChunk、runtimeChunk
  • devServer配置等

实际生产的一些优化

提升开发体验

• 使用Source Map然开发或者上线时代码报错能更加准确的错误提示。

提升打包构建速度

• 使用HotModuleReplacement（HMR热更新），让开发时只重新编译打包更新变化的代码，不会打包整个代码包， 不变的代码使用缓存，从而更新速度更快。

• 使用OneOf让资源文件一旦被某个loader处理了，就不会继续遍历loader，打包速度更快

• 使用Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快

• 使用Cache对eslint和babel处理的结果进行缓存，让首次之后的打包速度更快。

• 使用Thead多进程处理eslint和babel任务速度更快。（注意：进程启动通信都有开销的，要在项目比较大代码比较多处理时才有明显的效果）

减少代码体积

• 使用Tree Shaking去除了没有使用过的多余代码，让代码包体积更小。

• 使用@babel/plugin-transform-runtime插件对babel进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小

• 使用Image Minimizer对项目中图片进行压缩，体积更小，请求速度更快。（注意：如果项目中图片都是在线链接，那就不需要用了，本地项目静态图片才需要进行压缩。）

优化代码运行性能

• 使用Code Split把代码进行分割成多个js文件，从而使单个文件体积更小，并行加载js速度更快。并且通过import动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不进行加载。

• 使用Preload/Prefetch对代码进行预加载，等需要使用时就可以直接使用。（注意：浏览器兼容不是很好）

• 使用Network Cache对输出资源文件进行更好的命名，将来好做缓存。

• 使用Core-js对js进行兼容性处理，让代码可以兼容并运行在低版本浏览器

• 使用PWA让代码可以离线访问，从而提升用户体验。(注意：对于低版本浏览器兼容不是很好）