- Loader ?
- loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译,压缩等,最终一起打包到指定的文件中。处理一个文件可以使用多个 loader,loader 的执行顺序和配置文件是相反的,即最后一个 loader 最先执行,第一个 loader 最后一个执行。第一个执行的 loader 接收源文件内容作为参数,其他 loader 接收前一个执行的loader 的返回值作为参数,最后执行的 loader 会返回此模块的 Javascript 源码。
- 编写自己的 loader 时需要引用官方提供的 loader-utils,调用 loaderUtils.getOptions(this) 拿到 webpack 的配置参数,然后进行自己的处理。loader 本身仅仅是一个函数,接收模块代码的内容,然后返回代码内容转换后的结果,并且一个文件还可以连是的经过多个 loader 转化。
- 一个 loader 的职责是单一的,只需要完成一种转化。如果一个源文件需要经历多步转化才能正常使用,就通过多个loader 去转化。在调用多个 loader 去转化一个文件时,每个 loader 会链式的顺序执行,第一个 loader 将会拿到需处理的原内容,上一个 loader 处理后的结果会传给下一个接着处理。最后的 loader 将处理后的最终结果返回给 Webpack。
- Plugin ?
- plugin 功能强大,loader 不能做的都是它做,它的功能要更加丰富。从 打包优化和压缩,到重新定义环境变量,可以处理各种任务。
- plugin 让 webpack 的机制更加灵活,它 在编译过程中留下的一系列生命周期的钩子,通过调用这些钩子来实现在不同编译结果时对原模块进行处理。它的编译是基于事件流来编译的,主要通过 taptable 来实现插件的绑定和执行的,taptable 是基于发布订阅执行的插件架构,是用来创建声明周期钩子的库。调用 complier.hooks.run.tap 开始注册,创建 compilation,基于配置创建 chunks,在通过 parser 解析 chunks,使用模块和依赖管理模块之间的依赖关系,最后使用 template 基于 compilation 数据生成代码结果。
- 常见 Loader ?
- file-loader:文件加载。
- url-loader:文件加载,可以设置阈值,小于时把文件 base64 编码。
- image-loader:加载并压缩图片。
- json-loader:webpack 默认包含。
- babel-loader:ES6+ 转成 ES5。
- ts-loader:ts转化为js。
- awesome-typescript-loader:将 ts 转换为 js,性能更好。
- css-loader:处理 @import 和 url 这样的外部资源。
- style-loader:在 head 创建 style 标签把样式插入。
- postcss-loader:扩展 css 语法,使用 postcss 各种插件 autoprefixer,cssnext,cssnano。
- eslint-loader,tslint-loader:规范代码。
- vue-loader:加载 vue 单文件组件。
- i18n-loader:国际化。
- cache-loader:性能开销大的 loader 前添加,将结果缓存到磁盘。
- svg-inline-loader:压缩后的 svg 注入代码。
- source-map-loader:加载 source Map 文件,方便调试。
- expose-loader:暴露对象为全局变量。
- import-loader,export-loader:可以向模块注入变量或者提供导出模块功能。
- raw-loader:可以将文件以字符串形式返回。
- 校验测试:mocha-loader,jshint-loader,eslint-loader等。
- 常见 Plugin ?
- ignore-plugin:忽略文件。
- uglifyjs-webpack-plugin:webpack4之前,压缩和混淆代码,不支持 ES6 压缩。
- terser-webpack-plugin:webpack4,压缩和混淆代码,支持 ES6 压缩。
- webpack-parallel-uglify-plugin:多进程执行代码压缩,提升构建速度。
- mini-css-extract-plugin:分离样式文件,css 提取为独立文件,支持按需加载。
- serviceworker-webpack-plugin:为网页添加离线缓存功能。
- clean-webpack-plugin:目录清理。
- speed-measure-webpack-plugin:可以看见每个 loader 和 plugin 执行耗时。
- ProvidePlugin:自动加载模块,代替 require 和 import。
- html-webpack-plugin:可以根据模板自动生成 html 代码,并自动引用 css 和 js 文件。
- extract-text-webpack-plugin:将 JS 文件中引用的样式单例抽离成 css。
- DefinePlugin:编译时配置全局变量,这对开发模式和发布模式的构建允许不同的行为非常有用。
- HosModuleReplacementPlugin:热更新。
- DllPlugin 和 DllReferencePlugin 相互配合,前者第三方包的构建,只构建业务代码。
- optimize-css-assets-webpack-plugin:不同组件中重复的 css 可以快速去重。
- webpack-bundle-analyzer:一个 webpack 的 bundle 文件分析工具。
- compression-webpack-plugin:生产环境可采用 gzip 压缩 JS 和 CSS。
- happypack:通过多进程模型,来加速代码构建。