通过webpack编译应用程序时出现加载程序问题

时间:2018-08-11 15:16:57

标签: reactjs webpack webpack-dev-server babel-loader

我正在通过尝试创建一个小型应用程序来学习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'));

0 个答案:

没有答案