Webpackでクライアントとサーバーを分離する

Question

目標。 React、Webpack、MongoDBを持つappを設定する。

私はすでにReact for Webpackをセットアップしており、Mongooseをインポートしようとしました。問題：クライアント側とMongooseに反応する - サーバー側であり、そのためWebpackには両方の構成が必要です。この回答を使用して：https://stackoverflow.com/a/37391247/7479176 Webpackを設定しようとしました。その後、server.jsxファイルにMongooseをインポートしようとしましたが、動作しませんでした。

質問。 Webpackを設定するには、MongoDBを使うことができますか？

編集。私は（server.jsxを参照）server.jsxにコードを追加したとき、それはコンソールにメッセージをログに記録していなかった、

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

しかし：私は（警告を参照）、警告を取り除く方法を考え出しました。

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

ソリューション。私はwebpack-dev-middlewareとwebpack-hot-middlewareを基本的なExpressサーバーで使用しました。 webpack-dev-serverにReactを付けてMongoDBを起動しようとしましたが、それが大きな問題でした。

私は3つの別々のファイルの一般的な、DEV及びPRODにミドルウェアと分割のWebPACKの設定とニールLUNNとセットアップの基本Expressサーバからのアドバイスを、次の別のフォルダ内に新しいserver.jsを作りました。 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'] 
      } 
     ] 
    } 
}