Webpackを使用したJavascriptモジュール

Question

CommonJS + Webpackモジュールを使用してnodejs/expressアプリケーションのクライアントJavaScriptをリファクタリングしようとしています。

Webpackでは、2つのjsファイルからなる 'bundle.js'をビルドします。ここでは、CommongJS構文に従って2つのモジュールを定義しました。しかし、ページのwindow.onloadに私は素敵な「TypeError例外を取得：moveTo.logHelloWorldは機能」エラーではありません私は間違っ

を

WebPACKの構成：？

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    entry: ['./public/js/common.js', './public/js/moveTo.js'], 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.min.js' 
    }, 
    plugins: process.env.NODE_ENV === 'production' ? [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin() 
    ] : [] 
} 

moveTo.js

var moveTo = {}; 

console.log("moveTo.js loaded..."); 

moveTo.logHelloWorld = function(){ 
    console.console.log("Hello World logHelloWorld() from moveTo client Javascript!"); 
}; 

module.exports = moveTo; 

moveTo.handlebar WebPACKので構築されたの

<div>MoveTo</div> 
<script type="text/javascript"> 
    window.onload = function(){ 
    console.log("ON LOAD..."); 
    moveTo.logHelloWorld(); 
    } 
</script> 

、最終的にはメインテンプレートに私が含まbundle.js：

<script src="/bundle.min.js" type="text/javascript"></script> 

そして、これは私が得たエラーです：

更新：複数のクライアントjsファイルを使用する方法 別のtest.jsはそうのように、独自のモジュールを使用してファイル：

test.js WebPACKのコンフィグで

var test = {}; 

console.log("test.js loaded..."); 

test.logHelloWorld = function(){ 
    console.log("Hello World logHelloWorld() from TEST client Javascript!"); 
}; 

module.exports = test; 

そして：

私は仕事にこれを得ることができますどのように

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    entry: ['./public/js/common.js', './public/js/moveTo.js', './public/js/test.js'], 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.min.js', 
    library: ["moveTo", "test"] //This is not working. 
    }, 
    plugins: process.env.NODE_ENV === 'production' ? [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin() 
    ] : [] 
} 

を？ UPDATE

： これは私が提案しWebPACKの構成を使用し得るものである

#LASTアップデート＃

どうやらシングルbundle.jsを持っており、それが動作するように取得する方法はありません異なるjavascriptファイルで

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 
// ['./public/js/common.js', './public/js/moveTo.js', './public/js/test.js'], 
module.exports = { 
    entry: './public/js/t3toolbox.js', 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.min.js', 
    library: ["t3toolbox", "[name]"] 
    }, 
    plugins: process.env.NODE_ENV === 'production' ? [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin() 
    ] : [] 
} 

t3toolbox.js

var t3toolbox = {}; // Global App NameSpace 
var test = require('./test.js'); 
var moveTo = require('./moveTo.js'); 

t3toolbox.moveTo = moveTo; 
t3toolbox.test = test; 

module.exports = t3toolbox; 

のmoveTo：これは私が@hazardousの貴重な助けを借りて、これまで達し唯一のものです。あなたがあなたを見ることができるように、まだメイン AFを使用する必要がJS

var moveTo = {}; 

console.log("moveTo.js loaded..."); 

moveTo.logHelloWorld = function(){ 
    console.log("Hello World logHelloWorld() from MOVETO client Javascript!"); 
}; 

module.exports = moveTo; 

test.js

var test = {}; 

console.log("test.js loaded..."); 

test.logHelloWorld = function(){ 
    console.log("Hello World logHelloWorld() from TEST client Javascript!"); 
}; 

module.exports = test; 

moveTo.handlebars

のmoveTo

<script type="text/javascript"> 
    window.onload = function(){ 
    console.log("ON LOAD..."); 
    t3toolbox.main.moveTo.logHelloWorld(); 
    t3toolbox.main.test.logHelloWorld(); 
    } 
</script> 

ter t3toolbox。あなたのライブラリ場合

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    entry: ['./public/js/common.js', './public/js/moveTo.js'], 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.min.js', 
    library: 'moveTo' 
    }, 
    plugins: process.env.NODE_ENV === 'production' ? [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin() 
    ] : [] 
} 

- そのような

var mylibrary = { 
    main: { 
    moveTo: {/*...*/}, 
    test: {/*...*/} 
    } 
} 

Answer 1

追加してみてくださいlibraryからoutput設定、：私はそれは常にで終わるあなたが

var mylibrary = { 
    moveTO: {/*...*/}, 
    test: {/*...*/} 
} 

で終わる構成で実現しませんいくつかの輸出企業があり、これを使用してください -

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    entry: ['./public/js/common.js', './public/js/moveTo.js'], 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.min.js', 
    library: ["mylibrary", "[name]"] 
    }, 
    plugins: process.env.NODE_ENV === 'production' ? [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin() 
    ] : [] 
} 

この例はhttps://github.com/webpack/webpack/blob/master/examples/multi-part-library/webpack.config.js#L10に基づいています。

この設定例は、このフォームのエクスポートを作成します。

var mylibrary : { 
    "common": {/* exports from common */}, 
    "moveTo": {/* exports from moveTo */} 
} 

だからmylibrary.commonを使用してコードでそれらを使用することができ、mylibrary.moveToなど

をあなたがクラブにすべてをしたくない場合「てMyLibrary」であなたの輸入は、あなたがlibraryに変更することができます -

library:"[name]" 

これは、別の作成しますvar moveTo = ...およびvar test = ...のエクスポート。