webpack3:You 可能需要合适的加载程序来处理此文件

Question

我想我在 webpack.config.js 中遗漏了一些东西。当我尝试生成 bundle.js 时，出现此错误。

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

您可能需要一个合适的加载器来处理这个文件

| 
| 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 入口点

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

在你的webpack.config.js中尝试切换

use: ["babel-loader"],

至

loader: "babel-loader",

正如 Webpack 2 migration tutorial 所说，use 和 loader 之间的区别是当我们想要一组加载器时我们必须使用 use，如果它只是一个加载程序，我们必须使用 loader:

webpack3:You 可能需要合适的加载程序来处理此文件

webpack3:You may need an appropriate loader to handle this file

javascript

loader

reactjs

webpack