1. ホーム
  2. 質問と答え
  3. Webpackを使用してノードとエクスプレスを使用してWebpackを使用してクライアントコードをバンドルする

Webpackを使用してノードとエクスプレスを使用してWebpackを使用してクライアントコードをバンドルする

2016-07-30 10 views
1

私はノード/エクスプレスアプリを持っています。私は単一のhtmlページを提供し、ノード・サーバーに対してsockets.ioを使用してページを更新します。クライアント専用にバンドルしたいモジュールがあります。私はこれを行うにはwebpackを使用したい。 webpackを使用してサーバーコードをバンドルしたくないWebpackを使用してノードとエクスプレスを使用してWebpackを使用してクライアントコードをバンドルする

"start"はpackage.json（下記参照）で定義されたスクリプトで、 "npm start"を使ってこれを実行しようとしています。

すべてのnode_moduleをバンドルせずにクライアントJSをバンドルするにはどうすればよいですか？

Application File Structure: 
-client 
    -index.js <- main client entry file 
    -mapActions.js 
    -socketActions.js 
-src 
    -<serverModules>.js 
-index.html 
-package.json 
-server.js <--main server entry 
-webpack.config.js

webpack.config.js

module.exports = { 
    entry: './client/index.js', 
    output: { 
     path: './dist', 
     filename: 'app.bundle.js' 
    } 
};

クライアント/ index.js

var mapActions = require('./mapActions'); 
var socketActions = require('./socketActions'); 

/** 
* client entry point 
*/ 
module.exports = function(){ 
    //this function should initialize the app 
    mapActions.initialize(); 
    socketActions.initialize(); 
}

index.htmlを

<!DOCTYPE html><html><head></head> 
<body > 
    <script src="dist/app.bundle.js"></script> 
</body> 
</html>

package.json

//edited for brevity 
"scripts": { 
    "start": "npm run dev", 
    "dev": "./node_modules/.bin/webpack" 
    }, 
//edited for brevity

エラー：あなたのノードモジュールを除外する必要があなたのwebpack.config.jsで

Hash: 2c5042c2f89359320fa9 
Version: webpack 1.13.1 
Time: 710ms 
     Asset Size Chunks    Chunk Names 
app.bundle.js 790 kB  0 [emitted] main 
    [0] ./client/index.js 306 bytes {0} [built] 
    [1] ./client/mapActions.js 3.6 kB {0} [built] 
    [2] ./client/socketActions.js 892 bytes {0} [built] 
    + 131 hidden modules 

WARNING in ./~/socket.io/~/socket.io-client/socket.io.js 
Critical dependencies: 
1:475-482 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. 
@ ./~/socket.io/~/socket.io-client/socket.io.js 1:475-482 

WARNING in ./~/socket.io/~/engine.io/~/ws/lib/BufferUtil.js 
Module not found: Error: Cannot resolve module 'bufferutil' in D:\Node Practice\batweb\node_modules\socket.io\node_modules\engine.io\node_modules\ws\lib 
@ ./~/socket.io/~/engine.io/~/ws/lib/BufferUtil.js 10:19-40 

WARNING in ./~/socket.io/~/engine.io/~/ws/lib/Validation.js 
Module not found: Error: Cannot resolve module 'utf-8-validate' in D:\Node Practice\batweb\node_modules\socket.io\node_modules\engine.io\node_modules\ws\lib 
@ ./~/socket.io/~/engine.io/~/ws/lib/Validation.js 10:19-44 

WARNING in ./~/socket.io/~/socket.io-client/~/engine.io-client/~/ws/lib/BufferUtil.js 
Module not found: Error: Cannot resolve module 'bufferutil' in D:\Node Practice\batweb\node_modules\socket.io\node_modules\socket.io-client\node_modules\engine.io-client\node_modules\ws\lib 
@ ./~/socket.io/~/socket.io-client/~/engine.io-client/~/ws/lib/BufferUtil.js 10:19-40 

WARNING in ./~/socket.io/~/socket.io-client/~/engine.io-client/~/ws/lib/Validation.js 
Module not found: Error: Cannot resolve module 'utf-8-validate' in D:\Node Practice\batweb\node_modules\socket.io\node_modules\socket.io-client\node_modules\engine.io-client\node_modules\ws\lib 
@ ./~/socket.io/~/socket.io-client/~/engine.io-client/~/ws/lib/Validation.js 10:19-44 

ERROR in ./~/socket.io/~/socket.io-client/package.json 
Module parse failed: D:\Node Practice\batweb\node_modules\socket.io\node_modules\socket.io-client\package.json Unexpected token (2:8) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (2:8) 
    at Parser.pp$4.raise (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) 
    at Parser.pp.unexpected (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) 
    at Parser.pp.semicolon (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:581:61) 
    at Parser.pp$1.parseExpressionStatement (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:966:10) 
    at Parser.pp$1.parseStatement (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:730:24) 
    at Parser.pp$1.parseBlock (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:981:25) 
    at Parser.pp$1.parseStatement (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:709:33) 
    at Parser.pp$1.parseTopLevel (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25) 
    at Parser.parse (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17) 
    at Object.parse (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39) 
    at Parser.parse (D:\Node Practice\batweb\node_modules\webpack\lib\Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (D:\Node Practice\batweb\node_modules\webpack\lib\NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (D:\Node Practice\batweb\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 
    at nextLoader (D:\Node Practice\batweb\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) 
    at D:\Node Practice\batweb\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 
    at Storage.finished (D:\Node Practice\batweb\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) 
    at D:\Node Practice\batweb\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16 
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3) 
@ ./~/socket.io/lib/index.js 10:20-55 

ERROR in ./~/socket.io/~/engine.io/~/accepts/~/mime-types/~/mime-db/db.json 
Module parse failed: D:\Node Practice\batweb\node_modules\socket.io\node_modules\engine.io\node_modules\accepts\node_modules\mime-types\node_modules\mime-db\db.json Unexpected token (2:40) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (2:40) 
    at Parser.pp$4.raise (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) 
    at Parser.pp.unexpected (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) 
    at Parser.pp.semicolon (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:581:61) 
    at Parser.pp$1.parseExpressionStatement (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:966:10) 
    at Parser.pp$1.parseStatement (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:730:24) 
    at Parser.pp$1.parseBlock (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:981:25) 
    at Parser.pp$1.parseStatement (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:709:33) 
    at Parser.pp$1.parseTopLevel (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25) 
    at Parser.parse (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17) 
    at Object.parse (D:\Node Practice\batweb\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39) 
    at Parser.parse (D:\Node Practice\batweb\node_modules\webpack\lib\Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (D:\Node Practice\batweb\node_modules\webpack\lib\NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (D:\Node Practice\batweb\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 
    at nextLoader (D:\Node Practice\batweb\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) 
    at D:\Node Practice\batweb\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 
    at Storage.finished (D:\Node Practice\batweb\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) 
    at D:\Node Practice\batweb\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16 
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3) 
@ ./~/socket.io/~/engine.io/~/accepts/~/mime-types/~/mime-db/index.js 11:17-37

出典

2016-07-30 Dave C

+0

'index.js'で使用しているモジュールを私に見せてもらえますか – uzaif

+0

同じフォルダ内の2つのモジュールを参照していました。しかし、問題は、私のsocketsAction.jsファイルにsocket.ioが必要でした。下の私の答えを見てください。 –

答えて

0

にこのpostをマニュアルを参照してくださいは、私の問題を解決しました。

私は私のsocketActions.jsファイルから

var io = require('socket.io');

を削除し、グローバルとしてIOをエクスポートし、私のindex.htmlに

<script type="text/javascript" charset="utf-8" src="/socket.io/socket.io.js"></script>

を追加しました。それを必要とすると、webpackはそれをバンドルしようとします。

出典

2016-07-30 02:13:20

+1

'socketActions.js'はクライアントサイドなので、' socket.io-client'を使っていたはずです。 'socket.io'モジュールはサーバ側で使用するためのものです。 – robertklep

+0

良い点。私が使用したタグがドキュメントで使用しているタグのようです：[link]（http://socket.io/docs/）クライアントサイドのrequireステートメントは完全に '必須'ではありません。 –

+0

[こちら]（http://socket.io/docs/client-api/）には、require（ 'socket.io-client'） 'と記載されています。 Webpackベースのインストール（さらにBrowserify）では、 '

0

。例えば

：

module: { 
loaders: [{ 
    exclude: /node_modules/, 
    loader: '/* your loader */', 
}]

caranicasによってhere on using loaders

出典

2016-07-30 02:09:57 alexi2

+0

この応答をありがとう。これは私が試した最初のものでしたが、問題を解決しませんでした。ソリューションについては私の答えを参照してください。私はローダーの有無にかかわらず試してみましたが、私の答えはそれをどちらかの方法で解決しました。 –

関連する問題

 関連する問題