神刀安全网

Advanced WebPack Part 3 – Creating a custom notifier plugin

At Lonely Planet we use the heck out of WebPack. It’s an incredibly powerful tool.

Sometimes it takes a while though. I decided today that rather than watching the command line while it compiles to know when I’m good to refresh the browser, I’d just learn how to write a plugin to notify me about it.

Turns out it’s pretty darn simple.

// ./notifier.js "use strict";  class Notifier {     apply(compiler) {     compiler.plugin("done", (stats) => {       const pkg = require("./package.json");       const notifier = require("node-notifier");       const time = ((stats.endTime - stats.startTime) / 1000).toFixed(2);        notifier.notify({         title: pkg.name,         message: `WebPack is done!/n${stats.compilation.errors.length} errors in ${time}s`,         contentImage: "https://path/to/your/logo.png",       });     });   } }  module.exports = Notifier;   

Any class or function or even object with an apply function defined will automtically recieve an instance of the WebPack Compiler .

You can then hook into one of many different lifecycle events .

Then in your webpack.config.js

const Notifier = require("./notifier");  // ... {   plugins: [new Notifier()] }   

There’s a whole lot of cool things you can do by creating your own WebPack plugins!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Advanced WebPack Part 3 – Creating a custom notifier plugin

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址