Webpack + React: 模块解析失败：意外的标记：您可能需要适当的加载器。

Question

我卡在了简单的 ReactJs + Webpack 结构初始化上。不确定我错过了什么，但应该是非常愚蠢的错误。

有人能否请帮忙找出错误或者我做错了什么？

简单的 ReactJs 代码：index.js

import React from "react";
import render from "react-dom";

class App extends React.Component {
    render() {
        return <p>hello world</p>;
    }
}

render(<App />, window.document.getElementById('app'));

Webpack配置

import ExtraneousFileCleanupPlugin from 'webpack-extraneous-file-cleanup-plugin';

import manifestPlugin from 'webpack-manifest-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import webpack from 'webpack';
import path from 'path';

let pathsToClean = [   
    'sp/common/css/*.css',
    'sp/common/js/*.js',
];

// the clean options to use
let cleanOptions = {
    root:     path.resolve( __dirname, '../public'),
    exclude:  [],
    verbose:  false,
    dry:      false
};

module.exports = {

    entry: {
        'common/js/index' : [
            './src/js/index.jsx',
        ],
        'common/js/vendor': [
            'react', 'react-dom', 'react-router','axios',
            'redux', 'react-redux', 'redux-logger', 'redux-thunk', 'redux-promise-middleware'
        ],
    },
    output: {
        path: path.resolve(__dirname, '../public/'),
        filename: 'sp/[name].[chunkhash].js'
    },
    module: {
        rules: [
            {

                test: /\.js?$/,
                include: path.resolve(__dirname, './src/js'),
                exclude: [
                    path.resolve(__dirname, './build/'),
                    path.resolve(__dirname, './node_modules/'),
                ],
                loader: 'babel',
                options:{
                    babelrc: false,
                    presets: ['env', 'es2015', 'react', 'stage-2'],
                },
            },
            {
                enforce: "pre",
                test: /\.js?$/,
                include: path.resolve(__dirname, '/../src/js'),
                exclude: [
                    path.resolve(__dirname, '/../build/'),
                    path.resolve(__dirname, '/../node_modules/'),
                ],
                loader: 'eslint-loader',
            },    
        ],
    },

    plugins: [

        new webpack.optimize.CommonsChunkPlugin({
            name: "common/js/common",
            filename: "/sp/common/js/common.[chunkhash].js"
        }),
        new ExtraneousFileCleanupPlugin({
            extensions: ['.js'],
            minBytes: 1000,
            manifestJsonName: '/public/sp.manifest.json',
            paths: [
                'sp/common/css',
                'sp/common/js',
            ]
        }),
        new manifestPlugin({
            'options': {
                writeToFileEmit: true,
            },
            fileName: 'sp.manifest.json',
        }),
        new CleanWebpackPlugin(pathsToClean, cleanOptions), // clean the folders after generating new file
    ],

};

错误:

RROR in ./src/js/index.js
Module parse failed: Unexpected token (13:15)
You may need an appropriate loader to handle this file type.
| class App extends React.Component {
|     render() {
|         return <p>hello world</p>;
|     }
| }
 @ multi ./src/js/index.js

Webpack 版本：3.10 React 版本：16.2 React-dom 版本：16.2

- Ariful Haque

---

将“import render from 'react-dom';”更改为“import { render } from 'react-dom';”。 - Jayavel

@jayavel 没有改变任何东西 :( - Ariful Haque

似乎你的预设中没有React，也许这个链接可以帮助你。 - HMR

@hmr，我在我的选项中使用了React。 - Ariful Haque

Answer 1

问题已解决。我的 babel-loader 和 eslint-loader 的 includ 和 exclude 文件夹设置有误。我进行了更正，并且现在它能够正常运行。

- Ariful Haque