Question

我有一个节点/快递应用程序。我提供单个html页面，然后使用sockets.io到节点服务器来更新页面。我有我想要为客户端捆绑的模块。我想用webpack来做这件事。我不想使用webpack捆绑我的服务器代码。

我尝试使用＆＃34; npm start＆＃34;在哪里＆＃34;开始＆＃34;是package.json中定义的脚本（见下文）。

如何在不捆绑所有node_modules的情况下捆绑我的客户端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

错误：

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

Answer 1

在webpack.config.js中，您需要排除节点模块。

例如：

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

请参阅文档here on using loaders

Answer 2

caranicas的post解决了我的问题。

我删除了

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

从我的socketActions.js文件中添加

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

到我的index.html，它将io导出为全局。要求它似乎让webpack尝试捆绑它。

使用Webpack捆绑客户端代码，同时使用node和express而不使用webpack

2 个答案: