首先需要知道一个点,就是这个知识的界限和平常使用的频繁程度决定了学习阶段的掌握层次。比如说下面的区分环境,其实我直接在webpack.config.js每次需要的时候,自己手动修改设置就好,下面的区分只是更加的模块化,代码的复用程度也会更高,更加自动化吧。

一、直观了解

plugin究竟在干嘛?简单来说,就是在监听webpack编译过程的事件,通过compiler中的钩子函数干预webpack的编译过程。
区别于loader,loader是对源代码进行转化。

二、如何快速区分环境?

戒骄戒躁,自己输出一下吧,哪怕不是那么完整。

本来区分环境,我们是通过webpack.config.js文件,通过module.exports导出的对象里面具体设置,mode是什么,devtool是什么,然后,直接使用npx webpack进行打包。
但是。这里使用的是区分不同的环境(开发还是生产),利用已经写好的脚本快速搭建,每次需要修改时修改不同的config.js即可。
image.png
image.png

目前对于非必须的,我暂时掌握思路,对于一些非常有必要的,我会把代码的细节扣的非常细节。