如何在Webpack应用运行时引入构建时未打包的任意本地脚本？

Webpack的静态分析机制确实会拦截所有require/import调用，提前解析模块依赖——这就是你直接用动态路径require(plugin_dir + '/plugins.js')报错的原因。下面根据你运行的环境（浏览器/Node.js），分享几种可行的解决方案：

一、浏览器环境（前端Web应用） #

如果你的Webpack应用运行在浏览器里，想要加载构建时未打包的本地脚本（比如服务器上的插件文件），可以试试这两种方法：

1. 动态注入Script标签 #

这是最直观的方式，和传统加载外部脚本的逻辑一致，适合加载全局脚本或ES模块：

// 加载普通全局脚本
function loadGlobalScript(scriptPath) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = scriptPath;
    // 加载完成后执行回调
    script.onload = () => {
      document.head.removeChild(script); // 可选：加载完成后移除标签
      resolve();
    };
    script.onerror = (err) => reject(new Error(`加载脚本失败: ${scriptPath}`));
    document.head.appendChild(script);
  });
}

// 使用示例
loadGlobalScript('/plugins/my-plugin.js')
  .then(() => {
    // 脚本加载完成，直接调用全局暴露的方法
    window.myPlugin.init();
  })
  .catch(err => console.error(err));

如果要加载ES模块，只需给script标签加上type="module"：

function loadESModule(modulePath) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.type = 'module';
    script.src = modulePath;
    script.onload = () => {
      document.head.removeChild(script);
      resolve();
    };
    script.onerror = (err) => reject(new Error(`加载模块失败: ${modulePath}`));
    document.head.appendChild(script);
  });
}

2. Fetch获取脚本内容并执行 #

如果需要更灵活的控制（比如在当前作用域执行、获取模块导出），可以用fetch拉取脚本内容，再通过eval或动态import执行：

async function loadAndUseModule(modulePath) {
  try {
    const res = await fetch(modulePath);
    const code = await res.text();
    
    // 方法1：执行全局脚本
    eval(code);
    
    // 方法2：加载为ES模块（推荐）
    const module = await import(`data:text/javascript,${encodeURIComponent(code)}`);
    return module; // 返回模块导出内容，方便后续使用
  } catch (err) {
    console.error('加载模块出错:', err);
  }
}

// 使用示例
const myPlugin = await loadAndUseModule('/plugins/my-plugin.js');
myPlugin.doSomething();

二、Node.js环境（如Electron/Node服务） #

如果你的Webpack应用运行在Node.js环境（比如Electron主进程、Node后端服务），可以利用Webpack的注释指令绕过静态分析：

1. 用webpackIgnore注释跳过解析 #

在require前添加/* webpackIgnore: true */注释，告诉Webpack不要解析这个模块，让Node.js在运行时用原生require加载：

const pluginDir = '/path/to/your/plugins';
// Webpack会忽略这个require的静态分析，交给Node原生处理
const pluginModule = require(/* webpackIgnore: true */ `${pluginDir}/plugins.js`);

// 使用模块
pluginModule.run();

2. 配置externals排除插件目录 #

如果你的插件都在固定目录下，可以在Webpack配置里把该目录设为外部依赖，让Webpack不打包这些模块，运行时由Node加载：

// webpack.config.js
module.exports = {
  // ...其他配置
  externals: [
    function ({ request }, callback) {
      // 匹配所有以./plugins/开头的模块请求
      if (request.startsWith('./plugins/')) {
        // 告诉Webpack用commonjs规范加载外部模块
        return callback(null, `commonjs ${request}`);
      }
      callback();
    }
  ]
};

之后在代码里就可以直接用动态路径加载了：

const pluginPath = './plugins/my-plugin.js';
const myPlugin = require(pluginPath);

关于SystemJS的补充 #

你之前尝试用SystemJS没成功，大概率是Webpack把SystemJS也打包进去了，导致运行时逻辑冲突。可以试试把SystemJS设为外部依赖：

在webpack.config.js里添加：

module.exports = {
  externals: {
    systemjs: 'SystemJS'
  }
};

然后在HTML里手动引入SystemJS的本地文件，再在代码里使用：

import System from 'systemjs';

System.import('/plugins/my-plugin.js')
  .then(module => module.default.init())
  .catch(err => console.error(err));

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