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

Question

I have a node/express app. 我有一个节点/快递应用程序。 I serve a single html page which then uses sockets.io to the node server to get update the page. 我提供单个html页面，然后使用sockets.io到节点服务器来更新页面。 I have modules I want to bundle for the client only. 我有我想要为客户端捆绑的模块。 I want to use webpack to do this. 我想用webpack来做这件事。 I do not want to use webpack to bundle my server code. 我不想使用webpack捆绑我的服务器代码。

I'm attempting to run this using "npm start" where "start" is a script defined in package.json (see below). 我试图使用“npm start”运行它，其中“start”是package.json中定义的脚本（见下文）。

How can I bundle my client JS without bundling all the node_modules? 如何在不捆绑所有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 webpack.config.js

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

client/index.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 的index.html

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

package.json 的package.json

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

The Error: 错误：

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

In your webpack.config.js you need to exclude your node modules. 在webpack.config.js中，您需要排除节点模块。

For example: 例如：

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

See the documentation here on using loaders 请参阅此处有关使用加载器的文档

Answer 2

This post by caranicas solved my problem. caranicas的这篇文章解决了我的问题。

I removed 我删除了

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

from my socketActions.js file and added 从我的socketActions.js文件中添加

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

to my index.html, which exports io as a global. 到我的index.html，它将io导出为全局。 Requiring it seems to make webpack try to bundle it. 要求它似乎使webpack尝试捆绑它。

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

问题描述

2 个解决方案

解决方案1
0 2016-07-30 02:09:57

解决方案2
0 已采纳 2016-07-30 02:13:20

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

问题描述

2 个解决方案

解决方案1 0 2016-07-30 02:09:57

解决方案2 0 已采纳 2016-07-30 02:13:20

解决方案1
0 2016-07-30 02:09:57

解决方案2
0 已采纳 2016-07-30 02:13:20