webpack捆綁包中的必需模塊未定義

Question

我正在構建一個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構建在輸出文件的頂部具有入口文件，但工作正常。

Answer 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將自動執行需求，以便在需要時以正確的順序為您實例化模塊。