前端学习笔记-Webpack（二）

科粒KL
147 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Webpack实属前端知识体系中比较难以记忆的部分，之所以说记忆，是因为它需要理解的少而程序化约定俗成的东西更多，本系列尝试使用思维导图和一句话总结的方式帮助记忆。

compiler 和 compilation

  • compiler对象在构建之初就被创建，贯穿整个生命周期；
  • 每当编译具体模块时，才会创建一次compilation对象；

compiler 对象:

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

compilation 对象:

当 webpack 以开发模式运行时，每当检测到文件变化，一个新的 compilation 对象将被创建。

这个对象包含了当前的模块资源、编译生成资源、变化的文件等信息。也就是说，所有构建过程中产生的构建数据都存储在该对象上，它也掌控着构建过程中的每一个环节。

该对象也提供了很多事件回调供插件做扩展。

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

TO DO：下回详细分解

blog.csdn.net/weixin_4329… blog.csdn.net/weixin_4261…

DevServer

Webpack已内置此功能，如需开启仅需要在webpack.config.js配置即可

const path = require('path');
module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};

它在后台使用webpack-dev-middleware中间件，提供对 webpack 资源的快速内存访问。

热更新过程

只需要记忆这一张图：

image.png

  • Webpack Compile:将JS编译成Bundle
  • HMR Server:将热更新的文件输出给HMR Runtime
  • Bundle server:提供文件在浏览器的访问
  • HMR Runtime:会被注入到浏览器，更新文件的变化
  • bundle.js:构建输出的文件

代理

http-proxy-middleware

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；

avatar
文章
阅读
粉丝