夭幻境地

关注技术,关心成长,关怀世事人情

  • webpack的核心对象

    2017-12-10 22:08 714
    webpack中的核心对象我们不会讲所有 webpack 中的对象都拿出来讲解,而是整理了一些比较核心的概念。我们可以先看看下面的类图:下面的论述将会逐一讲述类图中的对象,首先我们先来看一下最顶层的类 Tapable。TapableTapable 提供了 webpack 中基于任务点的架构基础,它将提供任务点注册的方法以及触发的方法。一个简单的例子,使用 plugin 方法来注册一个任务点,然后使用 applyPlugins 方法触发:let obj = new Tapable() obj.plugin("name", (params...
  • webpack的基本架构和构建流程

    2017-12-10 21:58 714
    webpack的基本架构webpack 的基本架构,是基于一种类似事件的方式。下面的代码中,对象可以使用 plugin 函数来注册一个事件,暂时可以理解为我们熟悉的 addEventListener。但为了区分概念,后续的讨论中会将事件名称为 任务点,比如下面有四个任务点 compilation,optimize, compile, before-resolve:compiler.plugin("compilation", (compilation, callback) => { // 当Compilation...
  • Webpack 指南

    2017-12-02 16:17 727
    打包工具的角色所谓打包工具在web开发中主要解决的问题是:(1)文件依赖管理。毕竟现在都是模块化开发,打包工具首先就是要梳理文件之间的依赖关系。(2)资源加载管理。web本质就是html、js和css的文件组合,文件的加载顺序(先后时机)和文件的加载数量(合并、嵌入、拆分)也是打包工具重点要解决的问题。(3)效率与优化管理。提高开发效率,即写最少的代码,做最好的效果展示;尽可能的使用工具,减少机械coding和优化页面效果,这个是考验打包工具是否具备魅力的点。打包工具的结构由上图可以推出,打包工具的结构应该是tool+plugins的结构。tool提供基础能力,即文件依赖管理和资源加载管理;在...