项目说明

此项目总共 24 小节，前 15 节基于 Webpack4 渐进式教程 为基础，加上自己的实践和理解得出，感谢 心谭 😄

在 Webpack4 渐进式教程 的基础上升级：

• 使用 babel7
• 配置 .browserslistrc 文件
• 使用 mini-css-extract-plugin 替代 extract-text-webpack-plugin
• 使用 optimize-css-assets-webpack-plugin 压缩 css
• 使用 postcss 为 css 加上各个浏览器前缀
• 使用 image-webpack-loader 处理图片

随后的章节以 mooc 网 手把手带你掌握新版 Webpack4.0 整理的学习笔记，感谢 DellLee 老师 😄

目录：

1. 搭建项目并打包 JS 文件
2. 生产和开发模式
3. 覆盖默认 entry/output
4. 用 Babel 7 转译 ES6
5. Code Splitting
6. Lazy Loading、Prefetching
7. 自动生成 HTML 文件
8. 处理 CSS/SCSS 文件
9. JS Tree Shaking
10. CSS Tree Shaking
11. 图片处理汇总
12. 字体文件处理
13. 处理第三方 js 库
14. 开发模式与 webpack-dev-server
15. 开发模式和生产模式・实战
16. 打包自定义函数库
17. PWA 配置
18. TypeScript 配置
19. Eslint 配置
20. 使用 DLLPlugin 加快打包速度
21. 多页面打包配置
22. 编写 loader
23. 编写 plugin
24. 编写 Bundle

环境如下：

OS: 「win10」
node: 「10.5.0」
npm: 「6.1.0」
webpack: 「4.29.6」
webpack-cli: 「3.2.3」

每一个章节对应一个 demo 👉 配套的文档地址

有错误请提 issue

觉得有帮助的小伙伴不妨点个 star~

关于我

• 个人博客
• Email: [email protected]