阅读 226

Webpack - loader和plugins

什么是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…

文章分类
前端
文章标签