Webpack与babel-loader无法识别导入关键字

问题描述

我有这个 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']
  }
};

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

...yet I still get this error:

$ webpack -v
Hash: 2a9a40224beb025cb433
Version: webpack 1.10.5
Time: 44ms
   [0] ./src/admin/client/index.jsx 0 bytes [built] [failed]

ERROR in ./src/admin/client/index.jsx
Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import AdminInterface from './components/AdminInterface';

我有：

• 已安装 webpack 全球和本地


• 已安装 babel-loader ， babel-core 和 babel-runtime


• 已安装 babel-loader 全球，以防万一

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

为什么地狱是webpack似乎忽略 babel-loader ？或者 babel-loader 不能使用模块？

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

更新：

看起来像 babel 处理输入文件就好了。当我运行：

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 。

...it outputs ES5 as expected. Therefore, it seems to me like somehow webpack isn't properly loading babel-loader.

推荐答案

这看起来像是一个操作错误的情况。我的 webpack.config.js 结构不正确。具体来说，我需要将加载器细节放在模块中部分：

This looks like a case of operator error. My webpack.config.js structure was not correct. Specifically, I needed to put the loader details inside of a module section:

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']
    }
  }
};

这篇关于Webpack与babel-loader无法识别导入关键字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！