자동으로 생성 된 Webpack 설정이 실패했습니다.

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" 
    } 
} 

내가 년 정도 반응 웹팩 사용하고있다

이제

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 
    } 
}; 

webpack.config.js하지만 어두운 과거의 버전 . 반응 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에서 프로젝트를 실행하기 위해 노력하고 있다는 사실이다, 그러나 나에게 합리적인 보았다. 8888에서 시작하지 못하는 이유를 잘 모르겠다. config 파일의 끝에있는 devServer 객체에 추가하여 해결했지만, 여전히 같은 오류로 실패하고있다.

Answer 1

이처럼 웹팩에 react-hot-loader의 구성을 사용해보십시오 :

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

는 희망이 도움 :)