簡體   English   中英

使用Webpack捆綁客戶端代碼,同時使用node和express而不使用webpack

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

我有一個節點/快遞應用程序。 我提供單個html頁面,然后使用sockets.io到節點服務器來更新頁面。 我有我想要為客戶端捆綁的模塊。 我想用webpack來做這件事。 我不想使用webpack捆綁我的服務器代碼。

我試圖使用“npm start”運行它,其中“start”是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

在webpack.config.js中,您需要排除節點模塊。

例如:

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

請參閱此處有關使用加載器的文檔

caranicas的這篇文章解決了我的問題。

我刪除了

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嘗試捆綁它。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM