webpack调研实践

文章涉及的内容：

• webpack配置
• 对静态资源（图片，模板等）的处理
• 使react项目支持typescript，eslint，prettier等工具
• 优化webpack配置，减小代码体积
• 支持css预处理器
• 一套好用的样式方案
• 使项目支持多个环境切换（开发，测试，预发布，生产等）
• 使用规则来自动约束代码规范
• 优化开发体验
• 一些优化项目性能的建议

具体实现

1. 规范git提交
   husky+commitlint
2. webpack基本配置
   1） 文件目录结构
   --config
   |--config.js(配置项)
   |--webpack.base.js(基础配置)
   |--webpack.prod.js(生产环境)
   |--webpack.dev.js(开发环境)
   2）babel和typescript路径别名
3. webpack打包配置
   1）clean-webpack-plugin(生产环境删除上次生成的文件)
   2）webpack-bundle-analyzer(打包时生成分析报告，未做)
   3）支持less和css modules
   4）optimize-css-assets-webpack-plugin(提取css)
   5）postcss(自动增加css前缀)
4. 处理静态资源
   1）图片，css，js，字体，svg等loader配置
   2）copy-webpack-plugin
   生产环境需要将public除index.html以外的文件拷贝一份到打包目录
5. 提取公共模块，拆分代码
   将公共引入到包单独打成一个文件，例如react，react-dom
6. 压缩代码
   1）mini-css-extract-plugin(css压缩)
   2）compression-webpack-plugin(gzip压缩，设置大于10M文件压缩)
   3）terser(js压缩)
7. 配置webpack开发服务器
8. 自动寻找空闲端口监听（未做）
9. preload，prefetch(预读资源，优化用户体验，未做)
10. 配置按需加载
    @babel/plugin-syntax-dynamic-import
11. eslint
12. 提交代码时自动格式化代码(未做)
13. 用editorconfig统一编辑器规范
14. 使用jest
15. 美化webpack输出信息