本质上, webpack是一个现代JS应用程序的静态模块打包器(module bundler).
而想要真正学习webpack这门技术也并不是那么简单的事.
网上关于webpack的文章教材数不胜数, 在看了几篇文章之后, 感觉自己对其掌握的其实并不扎实.
所以趁着肺炎假期的这段时间, 想静下心来阅读《webpack中文文档》并将其中主要的案例都“敲透”, “吃透”...
但是当我真正打开webpack官网文档想要学习时, m耶, 为什么感觉这一个个什么html-webpack-plugin、 @babel/plugin-xxx就和我的脑子这么没有缘, 眼睛看过去就看过去了, 但是脑子完全没有留住它...
webpack: "是我不够迷人吗?"
而且就算我强行记住了官网给出的那些概念, 可还是不能够啊, 不能够正在理解它每个知识点的意思.
于是我转变了一种思路, 我是一个现实的人, 我就想看到我写的代码有些实质性的东西能让人看得着摸得着.
这也是我为什么喜欢前端的原因, 你敲一行代码就能看到一个效果, 多真实啊...
于是我先抛弃文档那些“晦涩难懂”的概念, 本地创建一个案例, 按着一个个新的知识点安装配置看看效果, 然后根据实际显示的效果与文档的概念进行对比, 再来理解它其中想要表达的意思. 同时将每个知识点做好笔记, 一定要有你自己对它的理解.
然后我发现这种学习方式对于我这样的笨鸟还是很有帮助的, 虽然花费的时间可能久了些, 但是至少能让我掌握了我想要学的这个知识点.
让自己慢慢沉淀下来... 现在对它有了一个新的认识...
之前的自己面对错中复杂的loader、plugin总是一知半解似懂非懂.
而如果你真正花了心思的去学习了解它, 那么曾经让你“躺目结舌”的配置, 代码好像也能慢慢看懂理解了.
此项目记录了我在webpack上的学习历程.如果你也和我一样想要好好的掌握webpack, 那么我认为它是对你是有一定帮助的, 因为教材中是以一名webpack小白的身份进行讲解, 案例demo也都很详细, 建议先mark再花时间来看.
最后, 编写整理教材不易, 还希望能求个Star🌟, 你的支持和鼓励是霖呆呆持续创作的主要动力, Thank you~
关于各个知识点的教材地址以及对应的案例地址:
文档地址: 《霖呆呆的webpack之路-基础篇》
掘金对应地址：《跟着"呆妹"来学webpack(基础篇)》
- 基本使用
- 使用配置文件
- 资源管理: style-loader, css-loader, file-loader
- 管理输出: 多个输入/输出, HtmlWebpackPlugin, CleanWebpackPlugin
案例地址: LinDaiDai/webpack-example/branch/webpack-basic
文档地址: 《霖呆呆的webpack之路-构建方式篇》
- webpack --watch
- webpack-dev-server 工具
- webpack-dev-middle 工具, 以及配合express搭建本地web服务器
案例地址: LinDaiDai/webpack-basic
🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟
- webpack-merge 构建不同的环境
- process.env.NODE_ENV 的基本使用
- webpack.DefinePlugin 插件指定 NODE_ENV
案例地址: LinDaidai/webpak-merge
文档地址: 《霖呆呆的webpack之路-优化篇》
- tree shaking 与压缩输出
案例地址: LinDaiDai/webpack-basic
🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟
- 代码分离-webpack3中的CommonsChunkPlugin
案例地址: LinDaiDai/webpack3-demo
- 代码分离-webpack4中的SplitChunksPlugin
案例地址: LinDaiDai/webpack-code-splitting
- 代码分离-import动态导入
- 懒加载-import动态导入
案例地址: LinDaiDai/webpack-dynamic-imports
🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟
- css代码分离
案例地址: LinDaiDai/webpack-loader
文档地址: 《霖呆呆的webpack之路-loader篇》
- 文件
- 转换编译
- 模版
- mode
- output
- devtool
文档地址: 《霖呆呆的webpack之路-配置篇》
案例地址: 在教材中的每一项有具体说明
喜欢霖呆呆的小伙还希望可以关注霖呆呆的公众号 LinDaiDai 或者扫一扫下面的二维码👇👇👇.
| 公众号二维码 | 赞赏码 |
|---|---|
 |
 |
我会不定时的更新一些前端方面的知识内容以及自己的原创文章🎉
你的鼓励就是我持续创作的主要动力 😊
整理文章, 编写案例不易 😂...
走过路过的各位大佬能否打赏点饭钱呢...