本文介绍了如何解决webpack编译和打包慢的问题，特别是在处理大型前端CRM项目时。通过升级到webpack4，并结合react和es6，实现了编译速度的显著提升。文章详细阐述了配置过程，包括使用happypack实现多线程任务、按需加载、hash指纹、支持各种预处理器等特性，同时给出了具体的目录结构、package.json配置以及webpack.config.js的开发和生产模式设置。经过优化，编译速度从8秒降至1.5秒，热更新速度也大大加快。
前端开发一个crm项目的时候，因为项目内容比较庞大，导致webpack编译和打包都巨慢，实在是影响开发效率，所以着手升级webpack。
webpack4-es6-react
webpack4-es6-react是一个全新的基于webpack4、react16、es6、antd-mobile的前端架构实现方案，默认是antd-mobile,也可以自定义配置ui框架如：antd
功能
- 编译速度快（使用happypack插件实现多线程执行任务）
- 按需加载（不同页面文件单独压缩）
- hash指纹（js、css文件自动添加版本号）
- es2015
- 支持less、stylus
- 图片体积小支持base64压缩
- 支持svg解析
- 支持自定义打包文件的目录
- 支持热更新
- 支持打包输出map文件
- 支持打包压缩文件
使用版本
- webpack 4.7.0
- react 16.4.0
- react-dom 16.4.0
目录结构
.
├── webpack.config --------------------- webpack相关配置
├
最低0.47元/天 解锁文章
扫一扫
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
