这是我参与「第五届青训营」伴学笔记创作活动的第 十一 天

什么是 Webpack ?

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。通过 Webpack 能够将多个文件资源合并成一个，减少 http 请求数，并且其支持模块化开发与高级JS特性，支持 Typescript、CoffeeScript 方言，还能够统一图片、CSS、字体等其它资源的处理模型。

核心流程

入口处理

从entry文件开始，启动编译流程。

依赖解析

从entry文件开始，根据require or import等语句找到依赖资源。

资源解析

根据module配置，调用资源转移器，将 png、css 等非标准 JS 资源转译为 JS 内容。
递归调用依赖解析与资源解析，直到所有资源处理完毕。

资源合并打包

将转译后的资源内容合并打包为可直接在浏览器运行的JS文件。

使用 Webpack

你可以通过以下命令安装 Webpack

npm install webpack -g

配置

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类: 流程类:作用于流程中某个 or 若干个环节，直接影响打包效果的配置项；工具类:主流程之外，提供更多工程化能力的配置项。

流程类配置

与流程类有关的配置有如下几类：

1. 输入：entry(入口) context(资源索引)
2. 模块解析：resolve externals
3. 模块转译：module
4. 后处理：optimization mode target
   

Loader

由于 Webpack 本身只能处理 JavaScript 模块，为了处理非标准 JS 资源，工程师们设计出了资源翻译模块 —— Loader。以处理 less 文件为例，你需要使用三个 loader 模块：
less-loader :实现 less => css 的转换
css-loader :将 CSS 包装成类似 module.exports = "${css}”的内容.包装后的内容符合 JavaScript 语法
style-loader :将 CSS 模块包进 require 语句，并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签

处理资源

处理 JS 资源

假设你需要对一个名为 app.js 的文件进行打包处理，你可以通过如下命令来完成。

webpack app.js bundle.js

执行以上命令会编译 app.js 文件并生成 bundle.js 文件。

当你需要对具有模块化特性的 JS 文件进行打包时，如以下两个 JS 文件 app.js 与 router.js：

//app.js
document.write(require("./router.js"));

//router.js
module.exports = "router.js.";

此时 Webpack 会根据模块的依赖关系将这些文件(模块)包含到 bundle.js 文件中，并给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 app.js 中的代码，再根据模块的依赖关系来执行模块里的代码。

处理 CSS 资源

处理 CSS 资源需要使用到 css-loader 和 style-loader,通过以下命令可以安装这两个模块：

npm install css-loader style-loader

通过以下语句在 JS 文件中导入 CSS文件并使用 loader：

require("!style-loader!css-loader!./style.css");

然后对 JS 文件进行打包，此时由于模块的依赖关系，CSS 文件也会根据配置进行打包操作。

插件

Webpack 本身的很多功能是基于插件实现的。插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工作。你可以通过以下命令来安装以使用 Webpack 内置插件:

npm install webpack --save-dev