/webpack4-learn

:memo: blog：https://itxiaohao.github.io/passages/webpack4-learn-introduction/

Primary LanguageJavaScript

项目说明

此项目总共 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~

关于我