webpack概述

概念

• 组成
  • 基础：入点entry，出口output及模式mode
  • 附加： 规则module.rules，插件plugins五部分构成
  • 规则由test及loader构成，组loader以栈（先进后出）的形式进行管道流水
• 模式development|production
  • 只设置 NODE_ENV，则不会自动设置 mode
  • 不同的取值，会设置process.env.NODE_ENV环境变量，从而执行不同的插件
• 插件(plugins)
  • 该配置属性接收插件实例
  • webpack compiler调用实现apply接口方法的插件实例
  • compiler对象在整个编译生命周期皆可访问
• 配置
  • webpack 的配置文件，是导出一个对象的 JavaScript 文件
• webpack模块
  • 以多种方式表达webpack模块依赖关系
    • es5中的import，CommonJS的require(), AMD的define和require语句
    • css/sass/less 文件中的 @import 语句
    • 式(url(…))或 HTML 文件(<img src=...>)中的图片链接(image url)
• Manifest(JSON)
  • 作用：使webpack能够管理所有模块之间的交互
  • 当编译器(compiler)开始执行、解析和映射应用程序时，Manifest会保留所有模块的详细要点
  • 原理：通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块
  • 要点：
    • manifest 包括新的编译 hash 和所有的待更新 chunk 目录
    • 编译器确保模块 ID 和 chunk ID 在这些构建之间保持一致

Loader

• 使用方式
  • 配置 在 webpack.config.js 文件中指定 loader
  • 内联
    • 在每个import语句中显式指定loader,使用!将资源中的loader分开,?传递查询参数
    • import Styles from 'style-loader!css-loader?modules!./styles.css';
  • CLI 在shell命令中指定loader
    • webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
• 特性
  • 支持异步操作，运行在node.js中
  • 接收查询参数，可以使用options对象进行配置，插件给loader增加更多特性
  • 支持链式传递，pipelne流水管道。一组链式的 loader 将按照相反的顺序执行,返回js
  • loader使用package.json中的main（入点），loader属性，后者将普通的npm模块导出为loader
• 解析
  • webpack能够解析三种路径, 绝对，相对，模块路径
    • 模块路径在resolve.modules中所指定的目录中搜索
  • loader模块导出为一个函数，使用node.js兼容的javascript编写

异步组件与代码分割

• 工厂函数
  • 这些内建函数都是类对象，当调用他们时，实际上是创建了一个类实例，通常是自产物，创建的对象在代码间无关系。
• Vue异步组件
  • 以一个工厂函数的方式定义的组件，这个工厂函数会异步解析组件定义
  • 关键：该工厂函数组件接收一个resolve回调，该回调函数会在得到组件定义的时候被调用
• vue路由懒加载
  • 应用场景：当路由被访问时才加载对应组件
  • 使用流程
    1. 将异步组件定义为返回一个Promise的工厂函数（该函数返回的Promise应resolve组件本身）
    2. 使用动态import语法来定义代码分块点import('./Foo.vue') // 返回 Promise
  • 把组件按组分块
    • 使用命名chunk，一个特殊的注释语法来提供 chunk name
    • const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    • Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中
    • 配置包 npm install --save-dev babel-plugin-syntax-dynamic-import