自動的に生成されたWebpackの設定が失敗しました

Question

私のプロジェクトではReactの古いバージョンが実行されていますので、16にドラッグしたいと思います。私は16を稼働させる方法に関する「ベストプラクティス」チュートリアルに進み、 2機は、ファイルを生成し 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を使用しますが、暗い過去からのバージョンにされていますがwebpack.config.js 。ゼロに反応してください！これは

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

このようなあなたのWebPACKにreact-hot-loaderの構成を使用してみてください：

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

はそれが役に立てば幸い:)