Webpack中从远程URL进行静态打包的实现方案咨询

Got it, let's solve this—you want to statically bundle raw GitHub source files into your Webpack bundle (no runtime dynamic loading) and add local caching so you don't re-download files every build. Here are two reliable approaches to make this work:

This loader is built specifically for handling remote resources, with out-of-the-box support for static bundling and local caching—perfect for your use case.

• Step 1: Install the dependency

  npm install http-loader --save-dev
  

• Step 2: Configure Webpack
  Add the loader rule to your webpack.config.js, targeting GitHub raw file URLs and setting up caching:

  module.exports = {
    module: {
      rules: [
        {
          test: /^https:\/\/raw\.githubusercontent\.com\/.+\.js$/,
          use: [
            {
              loader: 'http-loader',
              options: {
                // Enable local caching
                cache: true,
                // Custom cache directory (defaults to node_modules/.cache/http-loader)
                cacheDirectory: './.webpack-cache/http-loader',
                // Cache expiration time (set to 7 days here, in milliseconds)
                cacheTTL: 7 * 24 * 60 * 60 * 1000,
                // Ensure the file is bundled statically, not emitted as a separate asset
                emitFile: false
              }
            }
          ]
        }
      ]
    }
  };
  

• Step 3: Import the remote file in your code
  Just import the GitHub raw file URL directly—Webpack will download it during build, cache it locally, and bundle it statically into your output:

  import MyRemoteLib from 'https://raw.githubusercontent.com/username/repo/branch/path/to/library.js';
  
  // Use the library like any local module
  MyRemoteLib.doSomething();
  

If you need more control over caching rules, preprocessing, or other custom logic, you can build a simple custom loader:

• Step 1: Create the custom loader file (e.g., github-static-loader.js)

  const fs = require('fs');
  const path = require('path');
  const https = require('https');
  const crypto = require('crypto');
  
  // Define cache settings
  const CACHE_DIR = path.resolve(__dirname, './.webpack-cache/github');
  const CACHE_TTL = 7 * 24 * 60 * 60 * 1000; // 7 days
  
  // Ensure cache directory exists
  if (!fs.existsSync(CACHE_DIR)) {
    fs.mkdirSync(CACHE_DIR, { recursive: true });
  }
  
  module.exports = function(source) {
    const callback = this.async();
    const url = source;
  
    // Generate a unique cache filename using URL hash
    const fileHash = crypto.createHash('md5').update(url).digest('hex');
    const cacheFilePath = path.join(CACHE_DIR, `${fileHash}.js`);
  
    // Check if valid cache exists
    if (fs.existsSync(cacheFilePath)) {
      const stats = fs.statSync(cacheFilePath);
      if (Date.now() - stats.mtime.getTime() < CACHE_TTL) {
        fs.readFile(cacheFilePath, 'utf8', (err, data) => {
          if (err) return callback(err);
          callback(null, data);
        });
        return;
      }
    }
  
    // Download the remote file if no valid cache
    https.get(url, (res) => {
      let rawData = '';
      res.on('data', (chunk) => { rawData += chunk; });
      res.on('end', () => {
        // Save to cache for future builds
        fs.writeFile(cacheFilePath, rawData, 'utf8', (err) => {
          if (err) return callback(err);
          callback(null, rawData);
        });
      });
    }).on('error', (err) => {
      callback(err);
    });
  };
  

• Step 2: Configure Webpack to use your custom loader

  module.exports = {
    module: {
      rules: [
        {
          test: /^https:\/\/raw\.githubusercontent\.com\/.+\.js$/,
          use: [path.resolve(__dirname, './github-static-loader.js')]
        }
      ]
    }
  };
  

• Step 3: Import the remote file the same way as method 1

  import MyRemoteLib from 'https://raw.githubusercontent.com/username/repo/branch/path/to/library.js';
  

• Make sure you're using the raw file URL (starts with https://raw.githubusercontent.com/, not the repo's web page URL)
• Add your cache directory to .gitignore to avoid committing cached files to version control
• To force a re-download of updated remote files, either delete the cache directory or adjust the cacheTTL value

内容的提问来源于stack exchange，提问作者jugglingcats