const path = require('path');  const HTMlPlugin = require('html-webpack-plugin');    // 判斷是否是開發環境  const isDev = process.env.NODE_ENV === 'development'      const config = {    entry: {      app: path.join(__dirname,'../client/app.js')    },    output: {      filename: '[name].[hash].js',      path: path.join(__dirname,'../dist'),      publicPath: '/public'    },    module: {      rules: [        {          test: /.jsx$/,          loader: 'babel-loader'        },        {          test: /.js$/,          loader: 'babel-loader',          exclude: [            path.join(__dirname,'../node_modules')          ]        }      ]    },    plugins:[      new HTMlPlugin({        template:path.join(__dirname,'../client/template.html')      })    ]  }    //新增  if(isDev){    // 開發環境    config.devServer = {      host: '0.0.0.0',//可以使用ip訪問      port:'8888',      contentBase: path.join(__dirname,'../dist'),//打包后的文件      overlay:{        errors:true //直接在網頁上顯示錯誤      },      publicPath:'/public',      historyApiFallback:{        index:'/public/index.html'      }      }  }  module.exports = config;

npm install cross-env -D

  "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"

npm install react-hot-loader -D

 const webpack = require('webpack') if(isDev){   config.entry ={     app:[       "react-hot-loader/patch",       path.join(__dirname,'../client/app.js')     ]   }   ...省略   config.plugins.push(new webpack.HotModuleReplacementPlugin()) }

 ...省略 import { AppContainer } from 'react-hot-loader'; const root = document.getElementById('root') const render = Component =>{   aaa.hydrate(     <AppContainer>       <Component />     </AppContainer>,     root   ) } render(App) if(module.hot){   module.hot.accept('./App.jsx',()=>{     const NextApp = require('./App.jsx').default     render(NextApp)   }) }