我正在通过尝试创建一个小型应用程序来学习React。首先使用create-react-app创建了应用程序,并能够正确编译代码。但是,我尝试通过创建webpack.config.js文件来编译应用程序,但面临以下问题。
我的webpack.config.jsx文件-
const path = require ('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = function (env){
return{
entry:{
app: './src/index.jsx'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'build.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
"css-loader",
"sass-loader"
]
})
}
],
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
}
我的index.js文件-
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import Routes from './Routes'
ReactDOM.render(
<Routes />,
document.getElementById('root'));
我的Routes.jsx文件-
import React from 'react';
import {Route, BrowserRouter,Switch} from 'react-router-dom';
import Home from './Components/Home/Home';
import Landing from './Components/Landing/Landing';
import WeatherForecast from './Components//WeatherForecast/WeatherForecast';
import WeatherData from './Components/WeatherData/WeatherData';
const Routes = props => {
return (
<BrowserRouter >
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/landing" component={Landing}/>
<Route path="/weatherForecast" component={WeatherForecast}/>
<Route path="/weatherData" component={WeatherData}/>
</Switch >
</BrowserRouter>
)
}
export default Routes
运行webpack时遇到的错误是-
ERROR in ./src/index.jsx
Module parse failed: Unexpected token (9:0)
You may need an appropriate loader to handle this file type.
| ReactDOM.render(
|
| <Routes />,
| document.getElementById('root'));