此项目总共 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 老师 😄
目录:
- 搭建项目并打包 JS 文件
- 生产和开发模式
- 覆盖默认 entry/output
- 用 Babel 7 转译 ES6
- Code Splitting
- Lazy Loading、Prefetching
- 自动生成 HTML 文件
- 处理 CSS/SCSS 文件
- JS Tree Shaking
- CSS Tree Shaking
- 图片处理汇总
- 字体文件处理
- 处理第三方 js 库
- 开发模式与 webpack-dev-server
- 开发模式和生产模式・实战
- 打包自定义函数库
- PWA 配置
- TypeScript 配置
- Eslint 配置
- 使用 DLLPlugin 加快打包速度
- 多页面打包配置
- 编写 loader
- 编写 plugin
- 编写 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]