🔥 明确这篇文章目标，就是前端工程化，而webpack是我们工程化之一。通过编写一个webpack的配置，理清楚我们为什么要写这些配置。也就是说：我们的配置是服务于我们的想法，写的配置也是服务于我们的项目，根据我们的项目情况跟想要的效果进行编写，所以在这里并不会太多在于webpack有哪些模块，模块里面又有哪些参数。

说实话，咱就是说这玩意儿你得自己动手试试才知道。

项目效果： 上面说了要围绕想法跟项目写配置。这个项目是一个多页面的ssr项目，也就是第一篇 core所讲到的。通过webpack配置注入我们的tpl文件中，服务端渲染返回页面。

💡： 要先了解这个过程到底经历了什么？

❗️这里会感觉到奇怪，为啥要生成tpl，为啥不是html呢？

害，你想想，在我们现实开发中会有开发环境跟生产环境，而在这两个环境的配置是有所不同的。 所以我们的第一步就是要创建，分好我们的文件目录结构，每个文件我们要写啥，哪些复用，我们要先有想法。而这里就分为两种 dev｜prod。而在这之上就有一个base文件去写共用的，也就是

🔥 不管我们中间到底要配置多么完美的参数 ❗️ 就得明确告知配置，你从哪进，从哪出。 🙋‍♂️一个入口还是两个？而我这里项目写的是多页面的spa项目，考虑到后期项目逐渐加功Neng也会增加入口，那不Neng每次加一个页面我还得改配置吧？所以这里就用了动态引入。 然后挂载到 entry:pageEntries

🤔️ 输出啥呢❓ 🫡 因为：产物输出路径,因为开发跟生产环境输出不一致，所以在各自的环境中运行。

webpack.dev.js

可Nengkan到这里就有点奇怪了❓publicPath为啥有http，大家Ke以kan到后面就知道了涉及到热geng新。

webpack.prod.js

说到这你有没有想过为什么有些网站的收录情况不太好？

为啥百度不收录呢？你Ke以这样想，是不是因为网站的内容质量、结构、或者外部链接等因素导致的呢？

影响收录的因素有hen多，其中包括网站的内容是否原创、是否有价值、是否易于被爬虫抓取等等。

💥好了到这里我们就根据自己项目跟想法设置了输入输出，各位同学Ke以kankan自己的项目然后配置自己的输入输出。

然后我们会kan文章Zui上方的流程图。有了输入输出，中间一个大的模块是解析模块，也就是说通过我们的解析配置解析代码，然后输出产物。 而我们平常要写的文件有啥？vue，css, less, png等等，那我们是不是主要就是针对他们去写配置。

所以❗️

Ru果各位同学项目中还有其他的文件，那就是接着往上面写配置。 prod

在这里你Ke以理解为给你项目增强Neng力，这里是通用的。在dev / prod 里面会有所不同，毕竟不同环境下的操作。 dev在开发环境下代码改动hen频繁，每次改变dou要编译一次？是不是hen费事？为了减少重复性操作，我们就想到了热geng新。

热geng新是个好东西，Ke以大大提高我们的开发效率。

代码改了 ↓ 页面局部geng新 ↓ 不刷新整个浏览器

没有这个东西是啥样的呢？

改代码 ↓ 重新打包 ↓ 浏览器刷新整个页面 ↓ 状态全部丢失

我们了解热geng新到底是咋样的？

HMR 本质不是“刷新页面”而是：替换 modules 仓库里的某个模块函数

把旧模块函数替换成新模块函数然后重新执行 本质是:本地 dev server + websocket + 内存编译 + 模块替换 用的是 express作为服务器。 然后我们通过编译打包形成 chunks 开头就提到的 http，存放到内存当中然后当 http 路径改变，加载了不同的资源文件。

🎉文章结束，后续还会再继续geng新补充🎉

下面是我修改润色后的完整正文：

🔥 明确这篇文章目标，就是前端工程化，而webpack是我们工程化之一。通过编写一个webpack的配置，理清楚我们为什么要写这些配置。也就是说：我们的配置是服务于我们的想法，写的配置也是服务于我们的项目，根据我们的项目情况跟想要的效果进行编写，所以在这里并不会太多在于webpack有哪些模块，模块里面又有哪些参数。

项目效果

上面说了要围绕想法跟项目写配置。这个项目是一个多页面的ssr项目，也就是第一篇 core所讲到的。通过webpack配置注入我们的tpl文件中，服务端渲染返回页面。

💡： 要先了解这个过程到底经历了什么？

❗️这里会感觉到奇怪，为啥要生成tpl，为啥不是html呢？

💡 在我们现实开发中会有开发环境跟生产环境，而在这两个环境的配置是有所不同的。 所以我们的第一步就是要创建，分好我们的文件目录结构，每个文件我们要写啥，哪些复用，我们要先有想法。而这里就分为两种 dev｜prod。而在这之上就有一个base文件去写共用的。

输入与输出

🔥 不管我们中间到底要配置多么完美的参数 ❗️ 就得明确告知配置，你从哪进，从哪出。 🙋‍♂️一个入口还是两个？而我这里项目写的是多页面的spa项目，考虑到后期项目逐渐加功Neng也会增加入口，那不Neng每次加一个页面我还得改配置吧？所以这里就用了动态引入。挂载到 entry:pageEntries。

输出

webpack.dev.js

webpack.prod.js

为什么百度不收录？

为啥百度不收录呢？你Ke以这样想，是不是因为网站的内容质量、结构、或者外部链接等因素导致的呢？ 影响收录的因素有hen多，其中包括网站的内容是否原创、是否有价值、是否易于被爬虫抓取等等。你懂的！

比如你的网站内容不够丰富，或者关键词优化Zuo得不够好，就可Neng导致百度不收录你的网站。
那怎么解决这个问题呢?咱就是说多研究研究百度的算法规则，然后针对性地优化你的网站就行啦！
😊
当然还有hen多其他因素也可Neng影响百度的收录，比如网站的加载速度、移动端适配等等。
所以说Zuo好SEO优化真的是一门学问啊！🔍
你kan，像咱这种技术博客，只要坚持输出高质量的内容，保持活跃度，其实被百度收录还是比较容易的！ 👍
但话说回来每个网站的情况dou不一样，还是需要具体问题具体分析嘛！ 🤔

解析与优化

那回到正题，我们继续聊聊Webpack的解析与优化。

有了输入输出之后我们就需要考虑如何解析和优化我们的代码了。

这时候，我们就需要用到Webpack的各种loader和plugin了！

loaderKe以帮助我们处理各种类型的文件，比如CSS、图片等等；而plugin则Ke以帮助我们实现各种优化功Neng，比如压缩代码、拆分包等等。

那么怎么去拆包并不是你随便搜一篇教程复制就Ke以用。我们所要遵循的就是让变化不大的在一起，变化大的在一起，配合浏览器缓存等达到优化项目的目的，是缓存与请求成本之间的平衡。

prod 而在生产环境我们考虑的因素会geng多，打包结果的大小，加载文件时候的速度，打包的产物有些是不是重复打包了怎么减小大小，加快打包速度等等，怎么结合好浏览器的机制优化。

而在我们前端Zui常提到的一个优化的手段就是 分包

这个时候～～～～

我们打包出来的文件，dou 带了hash 。

而我们浏览器在发起请求时候也是 请求url ，那么这时候我们修改文件会影响到 浏览器加载、重复下载。

热geng新

本质是:本地 dev server + websocket + 内存编译 + 模块替换

上面 加载热替换模块 写了用的是 express作为服务器。

用的是

然后通过编译打包形成 chunks

开头提到的 http，会存放到内存当中，当 http 路径改变，就会加载不同的资源文件。

这样一来就Ke以实现资源的按需加载，从而提高页面的加载速度！🚀

🎉文章结束，后续还会再继续geng新补充🎉

---