webpackバンドルの必須モジュールは定義されていません

Question

私はjavascriptライブラリを構築しており、require（）メソッドを使用して外部モジュールを他のモジュールに必要としています。私の問題は、私が必要とするモジュールが定義されていないことです。すべてのモジュールがwebpackの出力ファイルに含まれているのがわかりますが、実行時に必要なモジュールは定義されていません。

私は実験を行い、必要なモジュールを出力ファイルの先頭にもう1つ移動しました。この方法で、必要なモジュールが最初にブラウザによってロードされます。これで問題は解決しました。例えば

：

// 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はモジュールが必要なときに正しい順序でモジュールをインスタンス化するためにrequireを自動的に実行します。