带有 babel-loader 的 Webpack 无法识别导入关键字 [英] Webpack with babel-loader not recognizing import keyword

问题描述

我有这个webpack.config.js:

module.exports = {条目:'./src/admin/client/index.jsx',输出: {文件名:'./src/admin/client/static/js/app.js'},装载机: [{测试:/.jsx?$/,装载机:'巴别塔'，排除:/node_modules/，询问: {可选:['运行时']}}],解决: {扩展名:['', '.js', '.jsx']}};

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

<前>$ webpack -v哈希:2a9a40224beb025cb433版本:webpack 1.10.5时间:44ms[0] ./src/admin/client/index.jsx 0 字节 [构建] [失败]./src/admin/client/index.jsx 中的错误模块解析失败:/project/src/admin/client/index.jsx Line 1: Unexpected reserved word您可能需要一个合适的加载器来处理这种文件类型.|从反应"导入反应；|从 './components/AdminInterface' 导入 AdminInterface；

我有:

• 在全局和本地安装webpack
• 安装 babel-loader、babel-core 和 babel-runtime
• 全局安装 babel-loader，以防万一

为什么 webpack 似乎忽略了 babel-loader?还是 babel-loader 不适用于模块?

更新:

看起来 babel 可以很好地处理输入文件.当我跑步时:

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

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

解决方案

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

module.exports = {条目:'./src/admin/client/index.jsx',输出: {文件名:'./src/admin/client/static/js/app.js'},模块: {装载机: [{测试:/.jsx?$/,装载机:'巴别塔'，排除:/node_modules/，询问: {可选:['运行时']}}],解决: {扩展名:['', '.js', '.jsx']}}};

I have this 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';

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

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

解决方案

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

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