webpack3: Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce fichier

Question

Je suppose qu'il me manque quelque chose dans webpack.config.js. Lorsque j'essaie de générer bundle.js, j'obtiens cette erreur.

ERROR in ./entry.js 
Module parse failed: /home/rahul/project/src/entry.js Unexpected token (9:2) 

Vous devrez peut-être un chargeur approprié pour gérer ce fichier

| 
| ReactDOM.render(
| <Router history={browserHistory}> 
|  <Route path="/register" component={Reg}> 
|   <IndexRoute component={Home}/> 

package.json

{ 
"name": "project", 
"version": "1.0.0", 
"description": "React with node and express", 
"main": "entry.js", 
"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1", 
"start": "node server.js" 
}, 
"author": "Rahul singh mawari", 
"license": "MIT", 
"dependencies": { 
"babel": "^6.23.0", 
"babel-cli": "^6.26.0", 
"babel-core": "^6.26.0", 
"babel-preset-es2015": "^6.24.1", 
"babel-preset-react": "^6.24.1", 
"express": "^4.16.2", 
"react": "^16.0.0", 
"react-dom": "^16.0.0", 
"react-router": "^4.2.0" 
}, 
"devDependencies": { 
"babel-loader": "^7.1.2", 
"http-server": "^0.10.0", 
"webpack": "^3.7.1" 
} 
} 

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 


var config = { 
entry: path.join(__dirname,'src', 'entry.js'), 
output: { 
    path: path.join(__dirname,'src', 'static'), 
filename: 'bundle.js', 
}, 

module: { 
rules: [ 
     { 
      test: /\.js?$/, 
      exclude:/node_modules/, 
      use: ["babel-loader"], 
      query: { 
presets: ['es2015', 'react'] 
} 
} 
] 
} 
}; 
module.exports = config; 

entry.js pour point d'entrée

import react from 'react'; 
import Reg from './components/register'; 
import Home from './components/home'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Link, browserHistory, IndexRoute } from 
'react-router'; 


ReactDOM.render(
<Router history={browserHistory}> 
    <Route path="/register" component={Reg}> 
    <IndexRoute component={Home}/> 
    </Route> 
    </Router>, 
document.getElementById('app') 
); 

Answer 1

dans votre webpack.config.js essayez de passer

use: ["babel-loader"], 

à

loader: "babel-loader", 

Comme le dit Webpack 2 migration tutorial, la différence entre use et loader est quand nous voulons une gamme de chargeurs nous devons utiliser use, si ce n'est qu'un chargeur, nous devons utiliser loader: