使用Webpack和Babel时，您可能需要一个适当的加载器来处理此文件类型。

Question

我正在尝试使用Webpack和Babel编译ES6资产，但是我遇到了以下错误信息：

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

这是我的Webpack配置:

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

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

这里是使用 Webpack 的中间件步骤：

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');

var express = require('express');
var app = express();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(err) {
  console.log('Server started on http://localhost:%s', port);
});

我所有的index.js文件只是导入了React，但似乎'babel-loader'没有起作用。

我正在使用'babel-loader' 6.0.0版本。

- egidra

---

我遇到了同样的问题。babel-preset-es2015已经安装，但在ReactDOM.render()调用中使用JSX仍然存在问题:s - SomethingOn

你的文件扩展名是什么？它们是js文件还是jsx文件？你的加载器只考虑具有jsx扩展名的文件，这可能是问题所在。 - cubbuk

在这个链接里，你的问题将会被100%解决：[https://dev59.com/4VUL5IYBdhLWcg3wk4vK#57543284][1] - Mehrdad Masoumi

在这个链接中，您的问题将会被100%解决 css import to next.js。 - Mehrdad Masoumi

Answer 1

注意：以下内容适用于Babel 6.x和Webpack 1.x。请查看最后的更新。

您需要安装“es2015”预设：

npm install babel-preset-es2015

然后配置 babel-loader：

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

更新：对于那些使用较新版本的Babel或Webpack的人：

• 对于Babel >= 7.x，您应该使用@babel/preset-env
• 对于Webpack >= 2.x，您应该使用options而不是query

- loganfsmyth

---

我已经安装了预设并安装了babel-loader。但仍然出现相同的错误。 - Umang Gupta

@UG_ 您需要提出一个单独的问题。我们需要看到您的整个配置和完整的错误信息。 - loganfsmyth

@UG_ 你找到解决方案了吗？ - Sarasranglt

我们应该在哪里配置“babel-loader”文件？ - nix86

@404usernamenotfound 修改了答案 - undefined

Answer 2

确保你已安装 es2015 babel预设。

一个示例的 package.json devDependencies 是：

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-loader": "^6.0.1",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15",
  "webpack": "^1.9.6",
  "webpack-dev-middleware": "^1.2.0",
  "webpack-hot-middleware": "^2.0.0"
},

现在在你的webpack配置中配置：

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

在项目根目录中的 node modules 文件夹下添加一个 .babelrc 文件：

{
  "presets": ["es2015", "stage-0", "react"]
}

更多信息：

• babeljs.io - 使用webpack使用babel

• babeljs.io - .babelrc的文档

• react-webpack-cookbook - 配置react和webpack

• 一个名为react-webpack-example的repo

- svnm

---

.babelrc文件就是我所缺少的，谢谢！这是完整的教程，被接受的答案只能帮你到这里。 - Mike

辅助信息：对于选项中的“stage-0”我不是很确定（也可以在.babelrc中进行配置）：一些功能可能无法在官方ES标准中实现，因此我通常使用更安全的“stage-3”。 - Christof Kälin

Answer 3

如果您正在使用 Webpack > 3，则只需安装 babel-preset-env，因为此预设包含了 es2015、es2016 和 es2017。

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

module.exports = {
    entry: {
        app: './app/App.js',
        vendor: ["react","react-dom"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../public')
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader?cacheDirectory=true',
            }
        }]
    }
};

这将从我的.babelrc文件中获取其配置：

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers":["last 2 versions"],
                    "node":"current"
                }
            }
        ],["react"]
    ]
}

- Mr. Doomsbuster

Answer 4

BABEL团队更新:

我们非常高兴您正在尝试使用ES2015语法，但是团队建议使用babel-preset-env代替继续使用年度预设。默认情况下，它具有与以前的预设相同的行为，将ES2015+编译为ES5。

如果您正在使用Babel版本7，则需要运行npm install @babel/preset-env并在.babelrc配置中添加"presets": ["@babel/preset-env"]。

这将把所有最新特性编译成es5转换代码：

前提条件：

1. Webpack 4+
2. Babel 7+

第一步：npm install --save-dev @babel/preset-env

第二步：为了将JSX代码编译为es5，Babel提供了@babel/preset-react包，用于将reactjsx扩展文件转换为本地浏览器可理解的代码。

第三步：npm install --save-dev @babel/preset-react

第四步：在您的项目的根路径中创建.babelrc文件，该文件应该和webpack.config.js在同一目录下。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

步骤5： webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}

- khizer

---

我非常兴奋你让开发人员在所有变更中更头疼了。 - AlexioVay

Answer 5

在我的情况下，我出现了这样的错误，因为导入路径是错误的:

错误的导入路径: import Select from "react-select/src/Select"; // 这是IDE自动生成的 ;)

正确的导入路径: import Select from "react-select";

- Pavlo Oliinyk

Answer 6

这让我感到很蠢，但我想分享给所有像我一样感到沮丧的人：我使用了webpack.dev.js，但没有将其指定为配置文件！运行Webpack时请使用以下命令：

webpack --config webpack.dev.js

结果突然就好了 ;)

- code

---

惊喜，这也为我解决了问题。 "build": "webpack --config webpack.dev.js"， 谢谢。 - Sonti Nagarjuna

Answer 7

您可能忘记了在文件名中添加.js扩展名。

Component -> Component.js

- Hasan Sefa Ozalp

---

我简直无法相信这是我的问题，创建文档后我没有注意到它。 - Helmut Granda

Answer 8

由于时间推移和更新更改，版本兼容性开始导致配置问题。

你的webpack.config.js应该像这样，你也可以根据自己的需要进行配置。

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

module.exports = {
  entry: './src/js/app.js',
  devtool: 'source-map',
    mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: ["babel-loader"]
    },{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  output: {
    path: path.resolve(__dirname, './src/vendor'),
    filename: 'bundle.min.js'
  }
};

另一个需要注意的是参数的变化，您应该阅读 Babel 文档 https://babeljs.io/docs/en/presets

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

注意：你需要确保在你的package.json依赖项中安装了上述的@babel/preset-env和@babel/preset-react。

- Codedreamer

---

添加 @babel/preset-react 对我来说解决了这个问题。 - kyw

Answer 9

2023年1月3日过时的Babel包

请安装以下这些包以进行与Babel的配置。

$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

并在下面的代码中添加.babelrc文件

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

我在我的应用程序中使用了@khizer的webpack配置。

感谢这个答案。因为我已经浏览了许多关于此解决方案的答案，花费了我2-3个小时的时间。我希望其他人不要浪费同样的时间。

- sushildlh

Answer 10

错误出现的另一个原因是在Angular中，我检查了样式列表中的html文件:

@Component({
selector: ...,
templateUrls: 'xyz.html',
stylesUrls: ['xyz.html']                  // problem 
})

如果地址指向错误的文件类型，则会引发此错误。

- Pratik Agarwal