Webpack - loader和plugins

知行行知
914 阅读4分钟

什么是loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

使用 loader

在你的应用程序中，有三种使用 loader 的方式：

  • 配置方式（推荐）：在 webpack.config.js 文件中指定 loader。
  • 内联方式：在每个 import 语句中显式指定 loader。
  • CLI 方式：在 shell 命令中指定它们。

loader 特性

  • loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
  • loader 可以是同步的，也可以是异步的。
  • loader 运行在 Node.js 中，并且能够执行任何操作。
  • loader 可以通过 options 对象配置（仍然支持使用 query 参数来设置选项，但是这种方式已被废弃）。
  • 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。
  • 插件(plugin)可以为 loader 带来更多特性。
  • loader 能够产生额外的任意文件。
  • 可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言翻译和 更多其他特性。

webpack常用loader

样式：

  • style-loader

  • css-loader、

  • less-loader、

  • sass-loader、

  • px2rem-loader

文件：raw-loader、file-loader 、url-loader等

编译：babel-loader、coffee-loader 、ts-loader等

校验测试：mocha-loader、jshint-loader 、eslint-loader等

什么是plugin

插件是 webpack 的 支柱 功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上。

在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。

使用plugin

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

常用plugin

  • extract-text-webpack-plugin 将js文件中引用的样式单独抽离成css文件

  • UglifyJsPlugin，压缩和混淆代码

  • CommonsChunkPlugin，提高打包效率，将第三方库和业务代码分开打包。

  • ProvidePlugin：自动加载模块，代替require和import

new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })

  • html-webpack-plugin可以根据模板自动生成html代码，并自动引用css和js文件

  • DefinePlugin 编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用。

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
  })

  • HotModuleReplacementPlugin 热更新

  • optimize-css-assets-webpack-plugin 不同组件中重复的css可以快速去重

  • webpack-bundle-analyzer 一个webpack的bundle文件分析工具，将bundle文件以可交互缩放的treemap的形式展示。

  • compression-webpack-plugin 生产环境可采用gzip压缩JS和CSS

  • happypack：通过多进程模型，来加速代码构建

  • NamedModulesPlugin：显示出被热替换模块的名称

loader和plugin的区别

对于loader，它就是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程；

对于plugin，它就是一个扩展器，它丰富了wepack本身，针对是webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，例如：

run：开始编译
make：从entry开始递归分析依赖并对依赖进行build
build-moodule：使用loader加载文件并build模块
normal-module-loader：对loader加载的文件用acorn编译，生成抽象语法树AST
program：开始对AST进行遍历，当遇到require时触发call
require:事件
seal：所有依赖build完成，开始对chunk进行优化（抽取公共模块、加hash等）
optimize-chunk-assets：压缩代码
emit：把各个chunk输出到结果文件

通过对节点的监听，从而找到合适的节点对文件做适当的处理。

参考地址：

[webpack之loader和plugin简介] zhuanlan.zhihu.com/p/28245984

[Webpack官方文档] webpack.docschina.org/concepts/lo…

avatar
文章
阅读
粉丝