Webpack JSX error: You may need an appropriate loader to handle this file type

Question

我正在尝试使用 webpack 构建项目，但出现错误。我之前可以用 gulp 构建这个项目，所以所有的路径和一切都应该没问题。我安装了本文档中的所有 babel 加载器 https://github.com/babel/babel-loader 并从示例中复制了代码。

ERROR in ./src/app.jsx
Module parse failed: ..path../src/app.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import ReactDom from 'react-dom';
 @ multi main

我的 webpack.config 文件：

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

module.exports = {
    devtools: 'inline-source-map',
    entry: [
        './src/app.jsx'
    ],
    output: {
        path: '../app/www/js/',
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: [path.join(__dirname, 'node_modules')],
        extensions: ['', '.js', '.jsx', '.scss']
    },
    modules: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                loaders: ["style", "css", "sass"]
            }
        ]
    }
};

Answer 1

应该是loader: 'babel'，不是loader: 'babel-loader'

编辑：显然它们是等价的。问题出在 Webpack 配置文件中，它是 module，而不是 modules。

Webpack JSX error: You may need an appropriate loader to handle this file type

Webpack JSX error: You may need an appropriate loader to handle this file type

javascript

webpack

babeljs

jsx