技术栈

源码分析

构建命令

项目构建从根目录 package.json 入口文件 npm script 开始，构建命令如下：

DevServer 是什么

Webpack DevServer 是一个方便开发的小型 HTTP 服务器，主要用于在开发过程中提供模块热替换（HMR）和源映射（source maps）等功能。

DevServer 功能

1. 提供 HTTP 服务而不是使用本地文件预览；
2. 监听文件的变化并自动刷新网页，做到实时预览；
3. 支持 Source Map，以方便调试。
4. webpack代理服务，解决跨域问题。

WebPack 产生背景

模块化

Webpack 最初的目标是解决前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源

最早的时候，我们会通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的JS 文件中

约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后调用模块化的成员

<script src="module-a.js"></script>
<script src="module-b.js"></script>

[TOC]

Loader

Loader 是什么？

loader 用于 对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件

为什么要 Loader?

webpack只支持对js 和 json 文件打包，像css、sass、png等这些类型的文件的时候，webpack 需要配置对应的loader进行文件内容的解析

webpack 模块方法

Module Methods document 模块-中文文档

**require.context **

[TOC]

webpack 基础配置项

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk：代码块，code splitting 后的产物，也就是按需加载的分块，装载了不同的 module。
  • Chunk 是一系列文件的集合，一个 Chunk 中会包含这个 Chunk 的入口文件和入口文件依赖的文件，由多个module组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。loader 间可以串行使用。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。