# clone 项目 git clone git@github.com:darrell0904/webpack-doc.git # 安装依赖 npm install # 启动项目 npm run dev
因为现在对于 webpack 的配置了解的不够全面,比较碎片话,同时有些很新的概念一直都没有应用。
这是我写这个文档原因,让自己更加系统全面的掌握 webpack ,毕竟 webpack 5.0 快要来了。
此篇文档的
webpack的版本是4.0
- 首先打开
host文件
sudo vi /etc/hosts
- 接着添加以下内容
# GitHub Start 192.30.253.112 github.com 192.30.253.119 gist.github.com 199.232.28.133 assets-cdn.github.com 199.232.28.133 raw.githubusercontent.com 199.232.28.133 gist.githubusercontent.com 199.232.28.133 cloud.githubusercontent.com 199.232.28.133 camo.githubusercontent.com 199.232.28.133 avatars0.githubusercontent.com 199.232.28.133 avatars1.githubusercontent.com 199.232.28.133 avatars2.githubusercontent.com 199.232.28.133 avatars3.githubusercontent.com 199.232.28.133 avatars4.githubusercontent.com 199.232.28.133 avatars5.githubusercontent.com 199.232.28.133 avatars6.githubusercontent.com 199.232.28.133 avatars7.githubusercontent.com 199.232.28.133 avatars8.githubusercontent.com # GitHub End
- 保存,退出,重新刷新
github页面
具体原因大家可以参考这篇文章:解决github图片不显示的问题
整个文档是用 vuepress 搞得,截图如下:
- webpack 的配置参数
- 配置 entry 和 output
- 配置 loader
- 配置 plugin
- 配置 sourceMap
- 配置 webpack-dev-derver
- 配置 HMR 热更新
- 打包 ES6 代码
- 打包 React 代码
- 一些补充
- webpack 的高级概念
- 配置 Tree Shaking
- Webpack 中的 ScopeHoisting
- Develoment 和 Production 模式的区分打包
- 显示日志和异常处理优化
- Webpack 和 Code Splitting
- 配置 SplitChunksPlugin
- 配置 Lazy Loading (懒加载)
- 打包分析 与 Preloading、Prefetching
- CSS 文件的代码分割
- Webpack 与浏览器缓存(Caching)
- Shimming 的作用
- 环境变量的使用
- Webpack 实战配置案例
- Library 打包
- PWA 打包
- SSR 打包
- TypeScript 打包
- webpack-dev-server 高级配置
- 配置 EsLint
- Webpack 多页面打包
- 性能优化 总览
- Webpack 优化策略
- 使用多进程打包
- 使用 DllPlugin 提高打包速度
- 总览
- Webpack 调试
- Webpack 启动过程分析
- Tapable 与 Webpack
- Webpack 打包流程分析
- 如何编写一个简易的 Webpack
- 如何编写一个 Loader
- 如何编写一个 Plugin
文档地址:webpack-doc 学习文档
这里列举了笔者学习 webpack 的主要来源,其余的参考资料我会再每一节发出来。