webpack 包中所需的模块未定义

Posted 2023-02-24

【中文标题】webpack 包中所需的模块未定义

【英文标题】：required modules in a webpack bundle are undefined

【发布时间】：2016-09-16 14:19:51

【问题描述】：

我正在构建一个 javascript 库并使用 require() 方法将外部模块要求到其他模块中。我的问题是我需要的模块没有定义。我可以看到所有模块都在 webpack 输出文件中，但在运行时所需的模块返回未定义。

我做了一个实验，将需要的模块移动到输出文件顶部的另一个模块中，这样浏览器首先加载了所需的模块。这解决了问题。

例如：

// main.js
var moduleA = require('./module.a.js');

var main = (function() 
    "use strict";


    return 
        moduleA: moduleA
    
)();

exports.main = main;



// module.a.js
var moduleA = (function() 
    "use strict";



    return 
        myMethod: myMethod
    
)();

exports.moduleA = moduleA;

目前我的webpack.config.js定义入口文件是main.js

    var path = require('path');
var webpack = require('webpack');
var libraryName = "myLib";

module.exports = 
  entry: './src/modules/main.js',
  output:  
    path: __dirname+"/build", 
    filename: libraryName+'.all.js',
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true
  ,
  resolve: 
    root: [
        path.resolve('./src/')
    ]
  ,
  module: 
    loaders: [
      // JS
      
        test: /.js/,
        loader: "babel-loader",
        exclude: /node_modules/,
        query: 
          presets: ['es2015']
        
      ,
    ]
  
;

这导致 main.js 首先加载到输出文件中，如果手动重新排序输出文件中的模块以便在我的主模块之前首先读取 moduleA，我该如何使用 webpack 解决这个问题？我的另一个 webpack 构建在输出文件的顶部有入口文件，但它工作正常。

【参考方案1】：

一旦开始使用 Webpack，您就可以使用大大简化的模块。您不必在 IIFE 中包装东西。 CommonJS 模块（你在使用 Webpack 时构建的）会自动干净地完成所有工作，并且不会污染全局范围。你只暴露你在module.exports里放的东西。

尝试以下方法：

// main.js
"use strict";

var moduleA = require('./module.a.js');

// do something with moduleA.myMethod()

module.exports = "Whatever you want to export";

和

// module.a.js
"use strict";

function myMethod()  
  return "something";


module.exports =  myMethod: myMethod ;

不需要其他任何东西。这将适用于 Webpack 提供的输出，您永远不必更改 Webpack 输出中的任何内容。 Webpack 会在需要时以正确的顺序自动执行需要为您实例化模块。