webpack 常用配置
本文收录了 webpack 相关的基础语法、环境配置、优化、部署等实用教程，方便快速查阅。
标签： Webpack
前端性能和加载体验优化实践 (附: PWA、离线包、内存优化、预渲染)
探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小，以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。
Node.js 使用 SCP SSH 部署项目
介绍了如何在无法直接访问 GitLab 的生产环境中，通过 SCP 和 SSH 实现代码上传及项目重启。利用 scp2 和 ssh2 NPM 包完成文件传输与命令执行，并通过 Webpack 打包脚本以适配 GitLab CICD 环境，解决依赖缺失问题，实现自动化部署。
webpack 只打包 CSS
介绍了如何使用 Webpack 单独打包 CSS 文件，通过设置“傀儡”入口文件 (style.js 和 index.style.html)，结合 MiniCssExtractPlugin 和 HtmlWebpackPlugin 插件实现 CSS 文件的独立构建。提供了详细的配置示例，适用于处理零散项目的模块化打包需求。
使用 webpack 插件 webpack-bundle-analyzer 优化代码体积
介绍了如何安装、配置和启动 Webpack Bundle Analyzer，用于分析 Webpack 打包后的文件结构。通过安装插件 (webpack-bundle-analyzer)，在 Webpack 配置中添加 BundleAnalyzerPlugin，并使用命令行启动分析工具。该工具可视化展示打包结果，帮助优化资源分配和减小文件体积。
读书笔记:《深入理解TypeScript》 - [澳]Basarat Ali Syed 著 / 郭文超 何小磊 柳星 徐野 译
总结了 TypeScript 的优势，包括类型安全、智能提示以及对 JavaScript 的兼容性。介绍了 null 和 undefined 的差异、将 JavaScript 迁移至 TypeScript 的方法、声明文件的使用以及支持导入非代码文件的方式。同时涵盖了泛型的设计理念及使用 Conventional-Changelog 自动生成变更日志的实践。
webpack 多页面 & GitLab 增量构建部署模板
介绍了一个基于 Webpack 的多页面模板，支持 GitLab 增量构建和部署。每个页面需在 pages 目录下包含 index.html 和 index.js，构建后生成独立的页面结构。通过 GitLab CI/CD 检测修改的页面，利用阿里云 OSS CLI 自动上传到云端，实现高效的增量部署。
创建一个新的 TypeScript 项目
介绍了如何初始化 NPM 项目并安装 TypeScript，通过 tsconfig.json 配置和 tsc 编译 .ts 文件。使用 Webpack 和 ts-loader 实现打包，并通过 ESLint 配置代码规范检测与修复。详细说明了各步骤的依赖安装、配置文件创建及命令运行，最后提供完整案例的 GitHub 链接用于参考和实践。
Rollup 和 webpack 环境变量的设置
讲解了在开发 NPM 包时如何通过 rollup-plugin-replace 和 webpack.DefinePlugin 处理环境变量，分别展示了两种工具的配置方法和代码示例，帮助实现开发与打包环境的兼容性。
webpack 4.x 快速搭建
介绍了使用 Webpack 构建项目的完整流程，包括安装依赖、配置脚本与目录结构、集成 HtmlWebpackPlugin 和 CleanWebpackPlugin 插件、设置 Babel 和 Sass 支持，以及启用观察模式和调试模式，提供了详细的代码示例以帮助开发者快速上手。