Question

我的项目正在运行一个非常旧的React版本，我想把它拖到16个版本。我通过了“最佳实践”教程，了解了如何启动和运行16并最终得到这两个机器生成的文件，的package.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对象中添加它来解决这个问题，但它仍然失败并出现相同的错误。

Answer 1

尝试在您的网络包中使用react-hot-loader的配置，如下所示：

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

希望有所帮助：）

自动生成的Webpack配置失败

1 个答案: