如何使用Webpack-Virtual-Modules虚拟添加Node模块？

我需要在应用中通过webpack-virtual-modules添加已打包的Node模块，包括axios、vue2、lodash、Moment.js、vue-loader、vue-template-compiler等。由于需要将vue-loader和vue-template-compiler纳入虚拟模块体系，Webpack的externals配置无法满足当前场景。

基础使用示例 #

var virtualModules = new VirtualModulesPlugin({
  'node_modules/module-foo.js': 'module.exports = { foo: "foo" };',
  'node_modules/module-bar.js': 'module.exports = { bar: "bar" };'
});

module.exports = {
  // ...其他Webpack配置
  plugins: [
    virtualModules
  ]
};

引入预打包模块的配置方法 #

以axios为例，将对应版本的预打包代码写入虚拟的node_modules目录下的对应文件中，其他模块可参照此方式配置：

// 先获取axios 1.7.7版本的预打包压缩代码
const axiosBundle = `
// 此处粘贴axios.min.js的完整代码内容
`;

const virtualModules = new VirtualModulesPlugin({
  // 配置axios虚拟模块
  'node_modules/axios/index.js': axiosBundle,
  // 配置vue2虚拟模块
  'node_modules/vue/dist/vue.min.js': '// 粘贴vue2的预打包代码',
  // 配置lodash虚拟模块
  'node_modules/lodash/lodash.min.js': '// 粘贴lodash的预打包代码',
  // 配置Moment.js虚拟模块
  'node_modules/moment/moment.min.js': '// 粘贴Moment.js的预打包代码',
  // 配置vue-loader和vue-template-compiler
  'node_modules/vue-loader/index.js': '// 粘贴vue-loader的代码',
  'node_modules/vue-template-compiler/index.js': '// 粘贴vue-template-compiler的代码'
});

module.exports = {
  // ...其他Webpack配置
  plugins: [virtualModules],
  // 确保Webpack能解析虚拟模块路径
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.vue', '.json']
  }
};

注意要点 #

• 对于体积较大的模块，建议通过文件读取方式引入代码，避免配置文件臃肿，比如使用fs.readFileSync('./vendor/axios.min.js', 'utf8')读取本地预存的打包文件
• 注意模块间的依赖匹配，比如vue-loader和vue-template-compiler需保证版本兼容，虚拟模块路径要符合模块自身的导出结构
• 部分模块可能依赖全局变量，需提前在Webpack配置中处理全局变量的注入逻辑

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