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