Webpack构建前查询MySQL数据库，避免生成临时文件方案咨询

核心方案 #

直接在Webpack构建生命周期内完成MySQL数据查询，通过自定义插件创建虚拟模块注入数据，跳过临时文件写入步骤。

实现步骤 #

• 用Node.js的mysql2库同步查询MySQL数据
• 编写Webpack插件，将查询结果转为虚拟模块内容
• 在业务代码中直接引入该虚拟模块，Webpack打包时自动替换为真实数据

代码示例 #

1. 安装依赖 #

npm install mysql2 --save-dev

2. 编写自定义Webpack插件 #

创建InjectMySQLDataPlugin.js文件：

const mysql = require('mysql2/promise');

class InjectMySQLDataPlugin {
  constructor(options) {
    this.options = options;
  }

  async apply(compiler) {
    // 建立数据库连接并查询数据
    const connection = await mysql.createConnection(this.options.dbConfig);
    const [rows] = await connection.execute(this.options.query);
    await connection.end();

    // 将数据转为可导出的JS字符串
    const dataModuleContent = `export default ${JSON.stringify(rows)};`;

    // 注册虚拟模块
    compiler.hooks.thisCompilation.tap('InjectMySQLDataPlugin', (compilation) => {
      compilation.hooks.normalModuleFactory.tap('InjectMySQLDataPlugin', (factory) => {
        factory.hooks.beforeResolve.tap('InjectMySQLDataPlugin', (resolveData) => {
          if (resolveData.request === this.options.moduleName) {
            resolveData.request = `data:text/javascript,${encodeURIComponent(dataModuleContent)}`;
          }
        });
      });
    });
  }
}

module.exports = InjectMySQLDataPlugin;

3. 配置Webpack #

在webpack.config.js中引入并配置插件：

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

module.exports = {
  // 其他基础配置（入口、输出等）
  plugins: [
    new InjectMySQLDataPlugin({
      dbConfig: {
        host: 'localhost',
        user: 'your_db_user',
        password: 'your_db_password',
        database: 'your_db_name'
      },
      query: 'SELECT * FROM target_table', // 你的查询语句
      moduleName: 'mysql-dataset' // 自定义虚拟模块名称
    })
  ]
};

4. 在业务代码中使用数据 #

直接引入虚拟模块即可获取MySQL数据：

import dataset from 'mysql-dataset';

// 前端使用数据示例
console.log('从MySQL获取的数据:', dataset);
document.getElementById('data-container').textContent = JSON.stringify(dataset);

注意事项 #

• 确保数据库连接信息安全，避免硬编码（可通过环境变量注入）
• 若数据量较大，可考虑在插件中添加数据格式化逻辑，减少打包后文件体积

内容的提问来源于stack exchange，提问作者Bastián Paredes