Unabe配置Webpack

Question

我整天都在撞墙，试图弄清楚这个问题。我正在尝试配置webpack以生成bundle.js，但遇到加载程序问题

ERROR in ./src/app.js 12:22
Module parse failed: Unexpected token (12:22)
You may need an appropriate loader to handle this file type.
| // addLocaleData(arLocaleData);
| // addLocaleData(esLocaleData);
> const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
| 
| // Containers

这是我相关的app.js

```import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import './App.scss';
import store from './store/Reducer';
const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;

// Containers
const DefaultLayout = Loadable({
  loader: () => import('./containers/DefaultLayout'),
  loading
});

// Pages
const Login = Loadable({
  loader: () => import('./views/Pages/Login'),
  loading
}); 

const Portal = Loadable({
  loader: () => import('./views/Pages/Portal'),
  loading
});

const Register = Loadable({
  loader: () => import('./views/Pages/Register'),
  loading
});

const Page404 = Loadable({
  loader: () => import('./views/Pages/Page404'),
  loading
});

const Page500 = Loadable({
  loader: () => import('./views/Pages/Page500'),
  loading
});

class App extends Component {

  constructor(props){
    super(props);
    store.subscribe(() => this.forceUpdate());
  }

  render() {
    // const locale = window.location.search.replace("?locale=","") || "en";
    // const messages = translations[locale]
    return (
      //<IntlProvider locale={locale} key={locale} messages={messages}>
      <HashRouter>
          <Switch>
            <Route exact path="/login" name="Login Page" component={Login} />
           <Route  path="#/portal" name="Portal Page" component={Portal} />
            <Route exact path="/register" name="Register Page" component={Register} />
            <Route exact path="/404" name="Page 404" component={Page404} />
            <Route exact path="/500" name="Page 500" component={Page500} />
            <Route path="/" name="Home" component={DefaultLayout} />
          </Switch>
      </HashRouter>
      //</IntlProvider>
    );
  }
}

export default App;

和web pack.config.js：

const path = require('path');

module.exports = {
    entry:  "./src/app.js",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [{
        test: /\.js$/, // include .js files
        enforce: "pre", // preload the jshint loader
        exclude: /node_modules/, // exclude any and all files in the `node_modules folder`
        use: [{
          loader: "jshint-loader",
          // more options in the optional jshint object
          options: {  // ⬅ formally jshint property
            camelcase: true,
            emitErrors: false,
            failOnHint: false
          }
        }]
      }]
    },
  };

，然后从命令行运行webpack。

我在这里缺少明显的东西吗？

Answer 1

确保安装babel-preset-es2015 使用

npm i babel-preset-es2015

首先，您需要创建.babelrc文件

{
  "presets": ["es2015", "react"],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

然后您需要安装一些软件包

npm install --save-dev babel-plugin-transform-class-properties

然后在您的装载机中添加这样的babel-loader

更改

loader: "jshint-loader",

对此

{
    loader: ["babel-loader", "jshint-loader"]
},