Webpack 错误：模块解析失败

Question

我对使用 webpack 比较陌生。我的问题是，当我运行./node_modules/.bin/webpack -d 时，我会遇到一个错误。我想知道任何人都可以帮助我并告诉我我可能会出错的地方。 错误如下：

`ERROR in ./src/components/App.js
 Module parse failed: /Users/danielmccord/webpack-
 demo/src/components/App.js Unexpected token (8:2)
 You may need an appropriate loader to handle this file type.
 | 
 | const App = () => (
 |   <div>
 |     <AddTodo />
 |     <VisibleTodoList />
 @ ./src/client/app/index.js 17:11-44`

Webpack 配置

var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
    entry: APP_DIR + '/index.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js?/,
            include: APP_DIR,
            loader: 'babel-loader'
        }]
    },
};
module.exports = config;

提前致谢

Answer 1

虽然你已经为你的 webpack 配置指定了加载器，但你没有指定 ES6 预设并且你的测试正则表达式不正确，将你的配置更改为

module: {
    rules: [{
        test: /\.jsx?$/,
        include: APP_DIR,
        exclude: [/node_modules/],
        use: [{
            loader: "babel-loader",
            options: {
                        presets: ["stage-0","es2015","react"],
                        plugins: ["transform-class-properties"]
                    }
        }]  
    }]

},

附：确保使用

安装预设和插件

npm install -S babel-plugin-transform-class-properties babel-preset-es2015 babel-preset-react babel-preset-stage-0