用socket.io和webpack构build一个反应应用程序是行不通的

本周我正在阅读有关这个​​问题的所有内容,但networking上的任何解决scheme都不适用于我正在开发的项目。 我正在使用反应和相关技术在webapp中工作。 为了使编译过程中使用新版本的webpack(v2.3.2)。 我有我的服务器webpackconfiguration与我的客户端webpackconfiguration分开。 所有的工作都很好,直到我添加了socket.io来创build一些实时组件。 应用networking中的所有解决scheme我仍然在运行我的捆绑脚本时收到以下警告:

WARNING in ./~/express/lib/view.js 80:29-41 Critical dependency: the request of a dependency is an expression WARNING in ./~/socket.io/lib/index.js 109:11-32 Critical dependency: the request of a dependency is an expression WARNING in ./~/engine.io/lib/server.js 115:15-37 Critical dependency: the request of a dependency is an expression 

当我尝试启动我的项目时,出现以下错误:

 return /*require.resolve*/(!(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())); ^ Error: Cannot find module "." at webpackMissingModule (/Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:357017:76) at Server.serveClient (/Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:357020:25) at new Server (/Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:356959:8) at Server (/Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:356951:41) at Object.<anonymous> (/Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:72569:33) at __webpack_require__ (/Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:20:30) at Object.<anonymous> (/Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:344445:18) at __webpack_require__ (/Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:20:30) at /Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:66:18 at Object.<anonymous> (/Users/macpro/Documents/lisa_project/pos_lisa/built/server/index.js:69:10) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) 

这是我的webpack.client.config.js

 const ExtractTextPlugin = require('extract-text-webpack-plugin'); const path = require('path'); const webpack = require('webpack'); module.exports = { entry: ['babel-polyfill', path.join(__dirname, '../source/client.jsx')], output: { filename: 'app.js', path: path.join(__dirname, '../built/statics'), }, module: { rules: [ { test: /\.json$/, use: 'json-loader', }, { test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel-loader', query: { presets: ['es2016', 'es2017', 'react'], plugins: ['transform-es2015-modules-commonjs'], }, }, { test: /\.css$/, exclude: /(node_modules)/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?modules', }), }, { test: /\.inline.svg$/, loader: 'babel-loader!react-svg-loader?' + JSON.stringify({ svgo: { // svgo options plugins: [{removeTitle: false}], floatPrecision: 2 } }), }, { test: /\.jpe?g$|\.gif$|\.png$|^(?!.*\.inline\.svg$).*\.svg$/, loader: 'url-loader?limit=400000' }, ], noParse: [ path.join(__dirname, '../node_modules/ws') ], }, externals: [ path.join(__dirname, '../node_modules/ws'), path.join(__dirname, '../node_modules/socket.io') ], target: 'web', resolve: { extensions: ['.js', '.jsx', '.css', '.json'], }, plugins: [ new webpack.DefinePlugin({ 'process.env.BROWSER': true, }), new ExtractTextPlugin({ filename: '../statics/styles.css', ignoreOrder: true, }), ], watch: true, }; 

这是我的webpack.server.config.js

 const ExtractTextPlugin = require('extract-text-webpack-plugin'); const path = require('path'); const webpack = require('webpack'); module.exports = { entry: ['babel-polyfill', path.join(__dirname, '../source/server.jsx')], output: { filename: 'index.js', path: path.join(__dirname, '../built/server'), }, module: { rules: [ { test: /\.json$/, use: 'json-loader', }, { test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel-loader', query: { presets: ['latest-minimal', 'react'], }, }, { test: /\.css$/, exclude: /(node_modules)/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?modules', }), }, { test: /\.inline.svg$/, loaders: [ 'babel-loader', { loader: 'react-svg-loader', query: { svgo: { plugins: [{removeTitle: false}], floatPrecision: 2 } } } ] }, { test: /\.jpe?g$|\.gif$|\.png$|^(?!.*\.inline\.svg$).*\.svg$/, loader: 'url-loader?limit=400000' }, ], noParse: [ path.join(__dirname, '../node_modules/ws') ], }, externals: [ path.join(__dirname, '../node_modules/ws'), path.join(__dirname, '../node_modules/socket.io') ], target: 'node', resolve: { extensions: ['.js', '.jsx', '.css', '.json'], }, plugins: [ new webpack.DefinePlugin({ 'process.env.BROWSER': false, }), new ExtractTextPlugin({ filename: '../statics/styles.css', ignoreOrder: true, }), ], watch: true, }; 

而我的server.jsx (重要部分)

 import http from 'http'; import express from 'express'; import socketio from 'socket.io'; const lisaApp = express(); const server = http.createServer(lisaApp); const io = socketio(server); 

提前,感谢您的帮助和解答

那么,我find了解决办法,也许这有助于别人。 在带有webpack的服务器端configuration中,我们必须读取node_modules中的目录列表,并给予externals,保留模块的“require”,所以我们必须在服务器端configuration中添加以下内容。 (只有服务器端,客户端的webpack工作正常):

 const fs = require('fs'); var nodeModules = {}; fs.readdirSync('node_modules') .filter(function(x) { return ['.bin'].indexOf(x) === -1; }) .forEach(function(mod) { nodeModules[mod] = 'commonjs ' + mod; }); 

这段代码必须在const webpackmodule.exports之间。 并在“模块”对象之后,添加以下行:

 externals: nodeModules, 

希望这有助于某人。