Webpack中的独立客户端和服务器

Question

目标。配置应用程序，其中包括：React，Webpack和MongoDB。

因此，我已经为React设置了Webpack并尝试导入Mongoose。问题：React客户端和Mongoose - 服务器端，并且因为Webpack必须具有两者的配置。使用这个答案：https://stackoverflow.com/a/37391247/7479176我试图配置Webpack。之后，我尝试在我的server.jsx文件中导入Mongoose，但它不起作用。

问题。如何配置Webpack，以便我可以使用MongoDB？

编辑。我想出了如何摆脱警告（见警告）：

output: { 
      filename: 'bundle.node.js', 
      libraryTarget: 'commonjs', 
      path: path.resolve(__dirname, 'dist') 
     }, 
     externals: [ 
      /^(?!\.|\/).+/i 
     ], 

但是，当我添加代码到server.jsx（见server.jsx），它并没有在控制台登录的消息。

的WebPack配置：

const path = require('path') 
const webpack = require('webpack') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
const CleanWebpackPlugin = require('clean-webpack-plugin') 

module.exports = [ 
    { 
     entry: { 
      index: './src/app/app.jsx' 
     }, 
     devtool: 'inline-source-map', 
     devServer: { 
      port: 3000, 
      host: 'localhost', 
      historyApiFallback: true, 
      noInfo: false, 
      stats: 'minimal', 
      hot: true, // Tell the dev-server we're using HMR 
      contentBase: path.resolve(__dirname, './dist'), 
      publicPath: '/' 
     }, 
     plugins: [ 
      new webpack.NamedModulesPlugin(), 
      new webpack.HotModuleReplacementPlugin(), // Enable HMR 
      new CleanWebpackPlugin(['dist']), 
      new HtmlWebpackPlugin({ 
       template: './src/index.html', 
       filename: 'index.html', 
       inject: 'body' 
      }) 
     ], 
     output: { 
      filename: 'bundle.js', 
      path: path.resolve(__dirname, 'dist') 
     }, 
     module: { 
      rules: [ 
       { 
        test: /\.(js|jsx)$/, 
        exclude: /node_modules/, 
        use: ['babel-loader'] 
       }, 
       { 
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'] 
       } 
      ] 
     } 
    }, 
    { 
     entry: { 
      index: './src/server/server.jsx' 
     }, 
     target: 'node', 
     output: { 
      filename: 'bundle.node.js', 
      path: path.resolve(__dirname, 'dist') 
     }, 
     module: { 
      rules: [ 
       { 
        test: /\.(js|jsx)$/, 
        exclude: /node_modules/, 
        use: ['babel-loader'] 
       } 
      ] 
     } 
    } 
] 

server.jsx：

import mongoose from 'mongoose' 
import '../config/database.js' 

mongoose.Promise = global.Promise 
mongoose.connect(config.database) 
// check connection 
mongoose.connection.once('open',() => console.log('Connected to MongoDB')) 
// check for db errors 
mongoose.connection.on('error', err => console.log(err)) 

警告：

WARNING in ./node_modules/mongoose/lib/drivers/index.js 
10:13-49 Critical dependency: the request of a dependency is an expression 

WARNING in ./node_modules/require_optional/index.js 
82:18-42 Critical dependency: the request of a dependency is an expression 

WARNING in ./node_modules/require_optional/index.js 
90:20-44 Critical dependency: the request of a dependency is an expression 

WARNING in ./node_modules/require_optional/index.js 
97:35-67 Critical dependency: the request of a dependency is an expression 

WARNING in ./node_modules/es6-promise/dist/es6-promise.js 
Module not found: Error: Can't resolve 'vertx' in 'D:\Projects\JavaScriptProjects\pizzaday\node_modules\es6-promise\dist' 
@ ./node_modules/es6-promise/dist/es6-promise.js 131:20-30 
@ ./node_modules/mongodb/lib/mongo_client.js 
@ ./node_modules/mongodb/index.js 
@ ./node_modules/mongoose/lib/index.js 
@ ./node_modules/mongoose/index.js 
@ ./src/server/server.jsx 

Answer 1

解。我用基本的Express服务器使用了webpack-dev-middleware和webpack-hot-middleware。我试着在webpack-dev-server上用React启动MongoDB，那是主要问题。

我根据Neil Lunn的建议在单独的文件夹中创建了新的server.js，并使用中间件设置了基本的Express服务器，并将Webpack配置分为3个独立的文件common，dev和prod。

在server.js代码这个片段帮我带的WebPack运行服务器和客户端一起其中连接一切融合在一起：

app.use(webpackDevMiddleware(compiler, { 
    publicPath: config.output.publicPath 
})) 

app.use(webpackHotMiddleware(compiler)) 

新的WebPack配置（webpack.common.js）：

const webpack = require('webpack') 
const path = require('path') 
const CleanWebpackPlugin = require('clean-webpack-plugin') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = { 
    entry: { 
     app: [ 
      'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true', 
      './src/index.jsx' 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new CleanWebpackPlugin(['dist']), 
     new HtmlWebpackPlugin({ 
      template: './index.html', 
      filename: 'index.html', 
      inject: 'body' 
     }) 
    ], 
    output: { 
     filename: '[name].bundle.js', 
     path: path.resolve(__dirname, 'dist'), 
     publicPath: '/' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       use: ['babel-loader'] 
      }, 
      { 
       test: /\.css$/, 
       use: ['style-loader', 'css-loader'] 
      } 
     ] 
    } 
}