自动生成的 Webpack 配置失败答案

【问题标题】：Automatically generated Webpack config failing自动生成的 Webpack 配置失败
【发布时间】：2017-12-11 03:49:33
【问题描述】：

我的项目正在运行一个非常旧版本的 React，我想将它拖到 16 中。我浏览了有关如何启动和运行 16 的“最佳实践”教程，最后得到了这两个机器生成的文件，包.json

{
  "name": "asset_iq",
  "version": "1.0.0",
  "description": "New application for the old  dealer net",
  "main": "bundle.js",
  "directories": {
    "doc": "docs",
    "test": "test"
  },
  "scripts": {
    "start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js"
  },
  "keywords": [
    "React",
    "Redux",
    "ES6"
  ],
  "author": "Mark Addinall",
  "license": "ISC",
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "react-hot-loader": "^3.1.3",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "lodash": "^4.17.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "redux": "^3.7.2",
    "redux-form": "^7.2.0",
    "redux-promise": "^0.5.3"
  }
}

和 webpack.config.js

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8888',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot-loader!babel-loader'
    }]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

现在我已经使用 react 和 webpack 大约一年了，但使用的是一个来自黑暗过去的版本。反应 0.x！然而，这在我看来是合理的，

npm start

> asset_iq@1.0.0 start /disk/dev/www/fastrack-react16/app/client
> webpack-dev-server --progress --colors --hot --config ./webpack.config.js

 10% building modules 1/1 modules 0 active                                         
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
 10% building modules 6/11 modules 5 active ...track-react16/app/client/src/index.js/disk/dev/www/fastrack-react16/app/client/node_modules/loader-runner/lib/loadLoader.js:35
            throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
            ^

奇怪的是它试图在正在使用的 8080 上运行项目，所以我认为这是 LIFECYCLE 异常的开始。不知道为什么它无法在 8888 上启动。我通过将它添加到配置文件末尾的 devServer 对象中解决了这个问题，但是它仍然失败并出现同样的错误。

【问题讨论】：

标签： reactjs webpack react-redux webpack-dev-server

【解决方案1】：

尝试在你的 webpack 中使用 react-hot-loader 的配置，如下所示：

{
test: /\.(js|jsx)$/,
loader: require.resolve('babel-loader'),
options: {
   cacheDirectory: true,
   plugins: [
    'react-hot-loader/babel'
   ]
  }
}

希望对你有帮助:)

【讨论】：

@Addinall 是的……没错