1

鉴于这些是我正在使用的依赖项：

"react-hot-loader": "3.0.0-beta.7",
"webpack": "2.6.1",
"webpack-dev-middleware": "^1.11.0",
"webpack-hot-middleware": "^2.18.1",
"webpack-merge": "^4.1.0"

错误

patch.js:5 

Uncaught ReferenceError: development is not defined
    at Object.defineProperty.value (patch.js:5)
    at __webpack_require__ (bootstrap 921586e…:659)
    at fn (bootstrap 921586e…:85)
    at Object.options.path (patch.js:1)
    at __webpack_require__ (bootstrap 921586e…:659)
    at fn (bootstrap 921586e…:85)
    at Object.<anonymous> (process-update.js:132)
    at __webpack_require__ (bootstrap 921586e…:659)
    at validateFormat (bootstrap 921586e…:708)
    at bootstrap 921586e…:708

您可能想看看这个repo </p>

网络包配置

const FILE_PATHS = {
  entry: path.resolve('./src/index.js'),
  reactHotLoader: 'react-hot-loader/patch',
  hmrEntry: 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', // this is from the webpack-hot-middleware docs
  output: '/' // this is the path used by webpack-dev-middleware, the docs say no real path is required, just pass in `/`
}

const devOnly = {
  entry: FILE_PATHS.entry,
  output: {
    path: '/',
    publicPath: '/assets/',
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ],
        // react-hot-loader asks to include src and exclude node_modules in https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md
        include: path.resolve('./src'),
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        use: [
          {
            loader: 'json-loader'
          }
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-sprite-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new DefinePlugin({
      'process.env.NODE_ENV': 'development'
    })
  ]
}

const hmr = {
  entry: [FILE_PATHS.reactHotLoader, FILE_PATHS.hmrEntry, FILE_PATHS.entry],
  plugins: [new HmrPlugin(), new NoErrorsPlugin()],
  devServer: {
    hot: true
  }
}

const dev = merge(devOnly, hmr)

module.exports = {dev}

快递服务器

// process.env.NODE_ENV = 'development'
const express = require('express')
const webpack = require('webpack')
const historyApiFallback = require('connect-history-api-fallback')

const normalizeAssets = assets => {
  return Array.isArray(assets) ? assets : [assets]
}

const getLinks = assets => {
  const styles = assets.filter(path => path.endsWith('.css'))
  const links = styles.map(path => `<link rel="stylesheet" href="${path}" />`)
  return links.join('\n')
}

const publicPath = '/assets/'

const getScripts = assets => {
  const js = assets.filter(path => path.endsWith('.js'))
  const scripts = js.map(path => `<script src="${path}"></script>`)
  return scripts.join('\n')
}

const devMiddlewareConfig = {
  serverSideRender: true,
  stats: 'normal',
  publicPath: publicPath,
  watchOptions: {
    poll: 1000,
    aggregateTimeout: 300
  }
}

const hotMiddlewareConfig = {
  reload: true,
  overlay: true
}

const devMiddlewareCreator = require('webpack-dev-middleware')
const hotMiddlewareCreator = require('webpack-hot-middleware')

const options = require('./webpack.config')

const {dev: devConfig} = options

const compiler = webpack(devConfig)
const devMiddleware = devMiddlewareCreator(compiler, devMiddlewareConfig)
const hotMiddleware = hotMiddlewareCreator(compiler, hotMiddlewareConfig)

const app = express()
app.use(devMiddleware)
app.use(hotMiddleware)
app.use(express.static(__dirname + '/public'))
app.use((req, res) => {
  const stats = res.locals.webpackStats.toJson()
  const assets = normalizeAssets(stats.assetsByChunkName.main)
  const styles = getLinks(assets)
  const scripts = getScripts(assets)
  res.send(
    `
<!DOCTYPE html>
    <html>
      <head>
        <title>Webpack is crazy</title>
        ${styles}
      </head>
      <body>
      <div id="app">
      </div>
      ${scripts}
      </body>
    </html>
`
  )
})

// app.use(historyApiFallback)

app.listen(3000, err => {
  if (!err) {
    console.log('Server is listening on port 3000')
  }
})
4

1 回答 1

8

该错误是由您的这部分配置引起的：

new DefinePlugin({
  'process.env.NODE_ENV': 'development'
})

引用文档：

请注意，由于插件会直接替换文本，因此赋予它的值必须包括字符串本身内的实际引号。通常，这可以使用备用引号（例如 '"production"'）或使用 JSON.stringify('production') 来完成。

例如，如果将其替换为以下内容，它应该可以工作：

new DefinePlugin({
  'process.env.NODE_ENV': '"development"'
})
于 2017-07-09T13:19:51.083 回答