Webpack - 编译 ES6 时的错误答案

【问题标题】：Webpack - errors at compile ES6Webpack - 编译 ES6 时的错误
【发布时间】：2016-07-01 11:46:54
【问题描述】：

试图在 Webpack 中编译 ReactJS 文件，但他没有看到各个模块。请指教。在附件 I 中，在下面的代码中抛出了一个带有 debbuga 的屏幕。

webpackjs

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

module.exports = {
    output: {
      path: path.join(__dirname,"build"),filename: 'bundle.js'
    },
    entry: ['./src/App.jsx'],
    plugins: [
        new webpack.NoErrorsPlugin()
    ],
    stats: {
        colors: true
    },
    devtool: 'source-map',
    resolve: {
      extensions: ['','.js', '.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            presets: ['react', 'es2015']
          }
         },
      ]
    }
};

App.jsx：

import React from 'react';
import {Router, Route, IndexRoute, Redirect} from 'react-router';
import DefaultLayout from './layouts/Default';
import HomePage from './components/Home';
import PrivacyPage from './components/Privacy';

export const routes = (
    <Route path='/' component={DefaultLayout}>
        <IndexRoute component={HomePage} />
        <Route path='privacy' component={PrivacyPage} />
        <Route path='*' component={NotFound} />
    </Route>
)

【问题讨论】：

这可能是尾随逗号的怪异问题。如果您 100% 确定您的文件夹结构正确，请尝试删除 loaders 中的尾随逗号。还要检查 package.json 是否有尾随逗号。它不应该导致这样的错误，但有时计算机很奇怪。 github.com/webpack/webpack/issues/981

标签： reactjs ecmascript-6 webpack

【解决方案1】：

你需要安装 babel-loader

npm install babel-loader

并使用

loader: 'babel-loader',

你可能还需要创建一个 babelrc，而不是在你的 webpack 配置文件中写你的预设

{
  "presets": ["es2015", "react"]
}

【讨论】：

【解决方案2】：

错误消息是找不到 src/components 文件夹。检查你的文件结构。

【讨论】：