基本概念
-
Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。 -
Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。
Webpack会从配置的Entry开始递归找出所有依赖的模块。 -
Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。 -
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。 -
Plugin：扩展插件，在Webpack构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
流程细节
Webpack 的构建流程可以分为以下三大阶段：
- 初始化：启动构建，读取与合并配置参数，加载
Plugin，实例化Compiler。 - 编译：从
Entry出发，针对每个Module串行调用对应的Loader去翻译文件内容，再找到该Module依赖的Module，递归地进行编译处理。 - 输出：对编译后的
Module组合成Chunk，把Chunk转换成文件，输出到文件系统。
常用 Loaders
加载文件
- raw-loader：把文本文件的内容加载到代码中去。
-
file-loader：把文件输出到一个文件夹中，在代码中通过相对
URL去引用输出的文件。 -
url-loader：和
file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去。 -
source-map-loader：加载额外的
Source Map文件，以方便断点调试。 -
svg-inline-loader：把压缩后的
SVG内容注入到代码中。 -
node-loader：加载
Node.js原生模块.node文件。 - image-loader：加载并且压缩图片文件。
-
json-loader：加载
JSON文件。 -
yaml-loader：加载
YAML文件。
编译模版
-
pug-loader：把
Pug模版转换成JavaScript函数返回。 -
handlebars-loader：把
Handlebars模版编译成函数返回。 -
ejs-loader：把
EJS模版编译成函数返回。 -
haml-loader：把
HAML代码转换成HTML。 -
markdown-loader：把
Markdown文件转换成HTML。
转换脚本语言
-
babel-loader：把
ES6转换成ES5。 -
ts-loader：把
TypeScript转换成JavaScript。 -
awesome-typescript-loader：把
TypeScript转换成JavaScript，性能要比ts-loader好。 -
coffee-loader：把
CoffeeScript转换成JavaScript。
转换样式文件
-
css-loader：加载
CSS，支持模块化、压缩、文件导入等特性。 -
style-loader：把
CSS代码注入到JavaScript中，通过DOM操作去加载CSS。 -
sass-loader：把
SCSS/SASS代码转换成CSS。 -
postcss-loader：扩展
CSS语法，使用下一代CSS。 -
less-loader：把
Less代码转换成CSS代码。 -
stylus-loader：把
Stylus代码转换成CSS代码。
检查代码
-
eslint-loader：通过
ESLint检查JavaScript代码。 -
tslint-loader：通过
TSLint检查TypeScript代码。 -
mocha-loader：加载
Mocha测试用例代码。 - coverjs-loader：计算测试覆盖率。
其它
-
vue-loader：加载
Vue.js单文件组件。 - i18n-loader：加载多语言版本，支持国际化。
- ignore-loader：忽略掉部分文件。
-
ui-component-loader：按需加载
UI组件库，例如在使用antd UI组件库时，不会因为只用到了Button组件而打包进所有的组件。
常用 Plugins
用于修改行为
- define-plugin：定义环境变量。
-
context-replacement-plugin：修改
require语句在寻找文件时的默认行为。 - ignore-plugin：用于忽略部分文件。
用于优化
- commons-chunk-plugin：提取公共代码。
-
extract-text-webpack-plugin：提取
JavaScript中的CSS代码到单独的文件中。 -
prepack-webpack-plugin：通过
Facebook的Prepack优化输出的JavaScript代码性能。 -
uglifyjs-webpack-plugin：通过
UglifyES压缩ES6代码。 -
webpack-parallel-uglify-plugin：多进程执行
UglifyJS代码压缩，提升构建速度。 - imagemin-webpack-plugin：压缩图片文件。
- webpack-spritesmith：用插件制作雪碧图。
-
ModuleConcatenationPlugin：开启
Webpack Scope Hoisting功能。 -
dll-plugin：借鉴
DDL的思想大幅度提升构建速度。 - hot-module-replacement-plugin：开启模块热替换功能。
其它
- serviceworker-webpack-plugin：给网页应用增加离线缓存功能。
-
stylelint-webpack-plugin：集成
stylelint到项目中。 - i18n-webpack-plugin：给你的网页支持国际化。
- provide-plugin：从环境中提供的全局变量中加载模块，而不用导入对应的文件。
-
web-webpack-plugin：方便的为单页应用输出
HTML，比html-webpack-plugin好用。
网友评论