名字webpack
webpack 是一个模块捆绑器。它的主要目的是将 JavaScript 文件捆绑在浏览器中使用，但它也能对任何资源或资产进行转换、捆绑或打包。
安装
使用 npm：
npm install --save-dev webpack
使用 yarn：
yarn add webpack --dev
介绍
webpack是一个模块的捆绑器。它的主要目的是将JavaScript文件捆绑在浏览器中使用，但它也能够对任何资源或资产进行转换、捆绑或打包。
长话短说：
- 捆绑 ES 模块 、CommonJS 和 AMD 模块（甚至是组合）。
- 可以创建一个单一的捆绑包或多个分块，在运行时异步加载（以减少初始加载时间）。
- 在编译过程中解析依赖关系，减少运行时的大小。
- 加载器可以在编译的同时对文件进行预处理，如 TypeScript 转为 JavaScript，Handlebars 字符串转为编译函数，图片转为 Base64 等。
- 高度模块化的插件系统，可以满足您的应用程序的任何其他需求。
开始使用
浏览器兼容性
webpack 支持所有 ES5 兼容 的浏览器（不支持 IE8 及以下版本）。webpack 还需要 Promise 来 import() 和 require.sure()。如果你想支持旧版本的浏览器，你需要在使用这些表达式之前 加载一个 polyfill。
概念
插件
webpack 有一个丰富的插件接口。webpack 本身的大部分功能都使用了这个插件接口。这使得 webpack 非常灵活。
| 名字 | 状态 | 安装大小 | 描述 |
|---|---|---|---|
| mini-css-extract-plugin | 
|
将 CSS 提取到单独的文件中。它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。 |
|
| compression-webpack-plugin | 
|
准备压缩版本的资产，以便用 Content-Encoding 提供给他们。 | |
| i18n-webpack-plugin | 
|
为你的捆绑包添加 i18n 支持。 | |
| html-webpack-plugin | 
|
简化 HTML 文件 (index.html) 的创建，以服务于您的 bundles。
|
|
| extract-text-webpack-plugin | 
|
从一个或多个 bundle 中提取文本到一个单独的文件中。 |
加载器（Loaders）
webpack 可以使用加载器来预处理文件。这允许你以超越 JavaScript 的方式捆绑任何静态资源。你可以使用 Node.js 轻松编写自己的加载器。
加载器可以通过在 require() 语句中使用 loadername！前缀来激活，或者通过 webpack 配置中的regex自动应用。
文件
| 名字 | 状态 | 安装大小 | 描述 |
|---|---|---|---|
| raw-loader | 
|
加载文件的原始内容 (utf-8) | |
| val-loader | 
|
以模块的形式执行代码，并将输出视为 JS 代码。 | |
| url-loader | 
|
工作原理和文件加载器一样，但如果文件小于限制值，可以返回一个数据 Url。 | |
| file-loader | 
|
发送文件到输出文件夹并返回（相对）url |
JSON
| 名字 | 状态 | 安装大小 | 描述 |
|---|---|---|---|
|
|
加载JSON文件（默认包含）。 | |
|
|
加载并转换 JSON 5 文件。 | |
|
|
加载并转换 CSON 文件 |
转换（Transpiling）
| 名字 | 状态 | 安装大小 | 描述 |
|---|---|---|---|
<script>
|
|
在全局上下文中执行一次 JavaScript 文件（如在脚本标签中），require() 不被解析。
|
|
|
|
加载 ES2015+ 代码，并使用 Babel 转码到ES5。 | |
|
|
使用 Traceur 加载 ES2015+ 代码并转码到 ES5。 | |
|
|
像 JavaScript 一样加载 TypeScript | |
awesome-typescript-loader
|
|
用于 webpack 的超棒的 TypeScript 加载器 | |
|
|
|
像加载 JavaScript 一样加载 CoffeeScript |
模板（Templating）
| 名字 | 状态 | 安装大小 | 描述 |
|---|---|---|---|
|
|
将 HTML 导出为字符串，需要引用静态资源。 |
|
|
|
加载 Pug 模板并返回一个函数。 | |
|
|
将 Markdown 编译成 HTML | |
|
|
使用 PostHTML 加载和转换一个 HTML 文件。 | |
|
|
将 Handlebars 编译成 HTML |
样式化（Styling）
| 名字 | 状态 | 安装大小 | 描述 |
|---|---|---|---|
<style>
|
|
在 DOM 中添加模块的导出样式 | |
|
|
加载已解析的 CSS 文件并返回 CSS 代码。 | |
|
|
加载并编译一个 LESS 文件 | |
|
|
加载并编译一个 Sass/SCSS 文件。 | |
|
|
加载并编译 Stylus 文件 | |
|
|
使用 PostCSS 加载和转换 CSS/SSS 文件。 |
代码检测和测试（Linting & Testing）
| 名字 | 状态 | 安装大小 | 描述 |
|---|---|---|---|
|
|
使用 mocha 进行测试(浏览器/NodeJS) | |
|
|
使用 ESLint 进行代码的预加载器。 | |
|
|
使用 JSHint 的预加载器来检测代码。 |
框架（Frameworks）
| 名字 | 状态 | 安装大小 | 描述 |
|---|---|---|---|
|
|
加载和编译 Vue 组件 | |
|
|
使用所选择的预处理器和 require() 处理 HTML 和 CSS，就像处理一流的模块一样处理 Web 组件。
|
|
|
|
加载和编译 Angular 2 组件 | |
|
|
Riot 官方 webpack 加载器 |
性能
webpack 使用异步 I/O，并且有多个缓存级别。这使得 webpack 在增量编译时速度非常快。
模块格式
webpack 支持 ES2015+、CommonJS 和 AMD 模块的开箱即用。它对你的代码的 AST 进行巧妙的静态分析。它甚至有一个评估引擎来评估简单的表达式。这让你可以支持大多数现有的库，开箱即用。
代码拆分
webpack 允许您将您的代码库分割成多个块。分块在运行时被异步加载。这减少了初始加载时间。
优化
webpack 可以做很多优化来减少 JavaScript 的输出大小，通过重复复制经常使用的模块，精简，并通过代码分割让你完全控制哪些是初始加载的，哪些是运行时加载的。它还可以通过使用哈希来使你的代码块缓存友好。
许可证
（vz Revised on 2021.01.30）
