前端学习笔记-Webpack学习笔记-1

话题也太大了，看来是永远整理不完

配置项

/s/1u2TGbJqO6roOTSAIM8NRew 提取码: geey
完整配置示例：http://webpack.wuhaolin.cn/2%E9%85%8D%E7%BD%AE/2-8%E6%95%B4%E4%BD%93%E9%85%8D%E7%BD%AE%E7%BB%93%E6%9E%84.html

打包结果

/s/1pGqWNIbwTIqmmyOz_PB6mg 提取码: brcu

工作流程

1. 读取由开发者定义的 webpack.config.js 配置文件 或者从 shell 语句中获得必要的参数；
2. 实例化所需plugins，webpack 事件流上挂载插件Hook；在构建过程中 插件具备改动产出结果的能力 ，事件流即使用了发布订阅模式。
3. 同时根据配置所定义的入口，以入口文件(可以不止有一个)为起始 进行依赖收集 ：
   • 对所依赖的文件进行编译。不同类型文件根据开发者定义的不同 loader 进行解析。
   • 编译好的内容使用 acorn 或其它抽象语法树能力，解析生成 AST 静态语法树，分析文件依赖关系；将不同模块化语法 (如require) 等替换为 __webpack_require__ 即 使用 webpack 自己的模块化实现 。
4. 上述过程进行完毕后 产出结果 根据配置将结果打包到output目录 。

加载 loaded 封存 sealed 优化 optimized 分块 chunked 哈希 hashed 重建 restored

概念理解

chunk是过程 bundle是结果

compiler 和 compilation

compiler 对象:

包含了完整的 webpack 配置，全局只有一个 compiler 实例，因此它就像 webpack 的骨架或神经中枢。当插件被实例化的时候，会收到这个 compiler 对象以访问 webpack 的内部环境。

compilation 对象:

当 webpack 以开发模式运行时，每当检测到文件变化，一个新的 compilation 对象将被创建。这个对象包含了当前的模块资源、编译生成资源、变化的文件等信息。也就是说，所有构建过程中产生的构建数据都存储在该对象上，它也掌控着构建过程中的每一个环节。该对象也提供了很多事件回调供插件做扩展。

compiler 对象和 compilation 对象都继承自基于事件流的 tapable，tapable.js 这个库暴露了所有和事件相关的 pub/sub 的方法。

TO DO：此话题待补充

https://blog.csdn.net/weixin_43294560/article/details/112972615
https://blog.csdn.net/weixin_42614080/article/details/110507675

DevServer

代理：http-proxy-middleware中间件

https://zhuanlan.zhihu.com/p/89176575

TO DO：此话题待补充

module-rules-test-use，此处为了使用options，把use内的字符串变为对象 拆分为loader与options两个部分，name字段使用了占位符(name为原名 ext为原后缀)

postcss-loader + autoprefixer插件 => 自动添加不同厂商浏览器css前缀

如果不使用模块化css，在单独js文件中import一个css实际上是全局引入，会影响其他js文件定义的组件；为了开启css模块 要把style-loader扩展成loader+options的形式 将modules字段设为true