[英]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.