stackoom
  简体   繁体   中英

Use Webpack to bundle client code while using node and express without webpack

 原文  2016-07-30 01:03:18  7   2    javascript/ node.js/ 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. I have modules I want to bundle for the client only. I want to use webpack to do this. I do not want to use webpack to bundle my server code.

I'm attempting to run this using "npm start" where "start" is a script defined in package.json (see below).

How can I bundle my client JS without bundling all the node_modules? 

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'
     }
 };

client/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

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

2 answers

solution1
 0  2016-07-30 02:09:57

In your webpack.config.js you need to exclude your node modules.

For example: 

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

See the documentation here on using loaders

solution2
 0 ACCPTED  2016-07-30 02:13:20

This post by caranicas solved my problem.

I removed 

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

from my socketActions.js file and added 

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

to my index.html, which exports io as a global. Requiring it seems to make webpack try to bundle it.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Webpack bundle Node Express with hot reloading = hell Node js express not loading webpack bundle js if redirected to index Express: serve Webpack bundle on subroutes Express not able to find webpack bundle Using webpack to bundle CSS Webpack bundle client specific components Bundle native Node modules with Webpack Using an ES6 module in both an app and in Node, while using Webpack-Dev-Middleware and Express Why use Webpack to bundle applications that run in node environment Webpack - build bundle without dependencies
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM