javascript - 带有 babel-loader 的 Webpack 无法识别 import 关键字

Question

我有这个webpack.config.js:

module.exports = {
  entry: './src/admin/client/index.jsx',
  output: {
    filename: './src/admin/client/static/js/app.js'
  },
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        optional: ['runtime']
      }
    }
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

...但我仍然收到此错误:

$ webpack -vHash: 2a9a40224beb025cb433Version: webpack 1.10.5Time: 44ms   [0] ./src/admin/client/index.jsx 0 bytes [built] [failed]ERROR in ./src/admin/client/index.jsxModule parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved wordYou may need an appropriate loader to handle this file type.| import React from 'react';| import AdminInterface from './components/AdminInterface';

I have:

• Installed webpack globally and locally
• Installed babel-loader, babel-core, and babel-runtime
• Installed babel-loader globally, just in case

Why the hell is webpack seemingly ignoring babel-loader? Or does babel-loader not work with modules?

Update:

It looks like babel handles the input file just fine. When I run:

./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx

...它按预期输出 ES5。因此，在我看来，webpack 没有正确加载 babel-loader。

Answer 1

这看起来像是操作失误的情况。我的 webpack.config.js 结构不正确。具体来说，我需要将加载器详细信息放在 module 部分中:

module.exports = {
  entry: './src/admin/client/index.jsx',
  output: {
    filename: './src/admin/client/static/js/app.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          optional: ['runtime']
        }
      }
    ],
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
  }
};