wlb-webpack-plugin: Injecting Anti‑Overwork and Code‑Addiction Logic into Webpack Builds

The wlb-webpack-plugin is a custom Webpack plugin designed to automatically inject "anti‑overwork" and "code‑addiction" logic into the build output when the build is performed outside of defined working hours, helping front‑end engineers maintain a healthier work‑life balance.

Key features of the plugin include:

Compliance with the Webpack plugin specification.

Configurable detection of working vs. non‑working time (including optional weekend ignoring).

Injection of specific logic into the bundle during non‑working periods.

The injected logic prints a warning slogan on Node.js builds and displays the same slogan on web pages.

Configuration options (default values shown) are defined as:

const DEFAULT_WARNING_MESSAGE = '别卷了！现在不是工作时间！为了营造良好的工作环境，WLB插件已经将「反内卷 & 防沉迷逻辑」注入到打包产物中。';
const DEFAULT_OPTIONS = {
  startWorkingTime: 10,
  endWorkingTime: 20,
  ignoreWeekend: false,
  warningMessage: DEFAULT_WARNING_MESSAGE,
  replaceOriginBundle: true,
};

The plugin reads these options in its constructor using Object.assign(DEFAULT_OPTIONS, options || {}) and stores them on the instance.

Work‑time detection uses the built‑in Date object:

const date = new Date();
const day = date.getDay();
const hour = date.getHours();
const isWorkdays = day <= 4 || ignoreWeekend;
const isWorkOvertime = !isWorkdays || hour < startWorkingTime || hour >= endWorkingTime;
if (isWorkOvertime) {
  // non‑working‑time logic
}

Code generation creates a random slogan and returns a self‑executing script that logs the slogan on Node and, if running in a browser, replaces the page content every second:

const htmlTemplate = (slogan) => {
  return `
${slogan}
由「wlb-webpack-plugin 反内卷 & 代码防沉迷 webpack 插件」支持
`;
};

const generateCode = () => {
  const slogan = getRandomSlogan();
  return `;(function(){
    const introduction='${slogan.introduction}';
    const content='${slogan.content}';
    console.log(introduction + content);
    if (typeof window !== 'undefined' && !window.showWLBPluginInfo) {
      window.setInterval(function(){
        document.body.innerHTML="${htmlTemplate(slogan.content)}";
      }, 1000);
      window.showWLBPluginInfo = true;
    }
  })()`;
};

Integration with Webpack occurs in the apply hook. When isWorkOvertime is true, the plugin logs the warning message and taps the emit hook to iterate over all assets, replacing or appending the generated code based on the replaceOriginBundle option:

class WLBPlugin {
  constructor(options) {
    this.options = Object.assign(DEFAULT_OPTIONS, options || {});
  }
  apply(compiler) {
    const { startWorkingTime, endWorkingTime, ignoreWeekend, warningMessage, replaceOriginBundle } = this.options;
    const date = new Date();
    const day = date.getDay();
    const hour = date.getHours();
    const isWorkdays = day <= 4 || ignoreWeekend;
    const isWorkOvertime = !isWorkdays || hour < startWorkingTime || hour >= endWorkingTime;
    if (isWorkOvertime) {
      console.log(chalk.red(warningMessage));
      compiler.hooks.emit.tap('WLBPlugin', (compilation) => {
        Object.keys(compilation.assets).forEach((item) => {
          let content = compilation.assets[item].source();
          if (replaceOriginBundle) {
            content = generateCode();
          } else {
            content = content + generateCode();
          }
          compilation.assets[item] = {
            source: () => content,
            size: () => content.length,
          };
        });
      });
    }
  }
}
module.exports = WLBPlugin;

With the plugin published at https://github.com/shadowings-zy/wlb-webpack-plugin , developers can simply add it to their Webpack configuration to enforce a gentle reminder against excessive coding during off‑hours.