手撸一个webpack骨架屏插件

前端

2023-11-20 14:37:17

在移动端开发中，骨架屏是一种常用的技术，它可以帮助我们在页面加载时显示占位符内容，从而避免页面出现空白。这可以提高用户体验，让用户在等待页面加载时不会感到无聊。

传统的骨架屏生成方法是使用chrome插件。这种方法很简单，只需要在浏览器中运行网页地址，然后基于插件生成即可。但是，这种方法也有一个缺点，那就是需要手动操作，比较麻烦。

为了解决这个问题，我们可以使用webpack插件来实现骨架屏的自动生成。webpack插件是一种可以扩展webpack功能的工具，我们可以通过编写插件来实现各种各样的功能。

在本文中，我们将介绍如何编写一个webpack骨架屏插件。这个插件可以帮助我们在打包代码时自动生成骨架屏，从而提升页面的加载速度和用户体验。

实现步骤

安装依赖

首先，我们需要安装一些必要的依赖：

npm install --save-dev webpack html-webpack-plugin

编写插件

接下来，我们需要编写一个webpack插件。这个插件可以帮助我们在打包代码时自动生成骨架屏。插件的代码如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

class SkeletonPlugin {
  constructor(options) {
    this.options = options || {};
  }

  apply(compiler) {
    compiler.hooks.compilation.tap('SkeletonPlugin', compilation => {
      compilation.hooks.htmlWebpackPluginAfterEmit.tap('SkeletonPlugin', (data, cb) => {
        const htmlFilePath = data.outputName;
        const skeletonHtmlFilePath = path.join(path.dirname(htmlFilePath), 'skeleton.html');

        // 读取html文件
        const html = fs.readFileSync(htmlFilePath, 'utf-8');

        // 替换css文件路径
        const cssRegex = /<link.*href="(.*?)".*>/g;
        const cssFiles = [];
        let match;
        while ((match = cssRegex.exec(html)) !== null) {
          cssFiles.push(match[1]);
        }
        cssFiles.forEach(cssFile => {
          const cssFilePath = path.join(path.dirname(htmlFilePath), cssFile);
          const skeletonCssFilePath = path.join(path.dirname(htmlFilePath), 'skeleton', cssFile);

          // 读取css文件
          const css = fs.readFileSync(cssFilePath, 'utf-8');

          // 将css文件中的url()替换成skeleton.css中的url()
          const skeletonCssRegex = /url\((.*?)\)/g;
          const skeletonCss = css.replace(skeletonCssRegex, `url(skeleton.${match[1]})`);

          // 写入skeleton.css文件
          fs.writeFileSync(skeletonCssFilePath, skeletonCss);
        });

        // 替换js文件路径
        const jsRegex = /<script.*src="(.*?)".*>/g;
        const jsFiles = [];
        while ((match = jsRegex.exec(html)) !== null) {
          jsFiles.push(match[1]);
        }
        jsFiles.forEach(jsFile => {
          const jsFilePath = path.join(path.dirname(htmlFilePath), jsFile);
          const skeletonJsFilePath = path.join(path.dirname(htmlFilePath), 'skeleton', jsFile);

          // 读取js文件
          const js = fs.readFileSync(jsFilePath, 'utf-8');

          // 将js文件中的url()替换成skeleton.js中的url()
          const skeletonJsRegex = /url\((.*?)\)/g;
          const skeletonJs = js.replace(skeletonJsRegex, `url(skeleton.${match[1]})`);

          // 写入skeleton.js文件
          fs.writeFileSync(skeletonJsFilePath, skeletonJs);
        });

        // 生成skeleton.html文件
        const skeletonHtml = html.replace(cssRegex, `<link rel="stylesheet" href="skeleton.css">`).replace(jsRegex, `<script src="skeleton.js"></script>`);
        fs.writeFileSync(skeletonHtmlFilePath, skeletonHtml);

        cb();
      });
    });
  }
}

module.exports = SkeletonPlugin;

使用插件

在webpack配置文件中，我们可以使用这个插件。插件的使用方法如下：

const SkeletonPlugin = require('./SkeletonPlugin');

module.exports = {
  // ... 其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
    new SkeletonPlugin(),
  ],
};