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 文件都在做导入反应，但似乎“babel-loader”不起作用。

我正在使用“babel-loader”6.0.0。

Answer 1

您需要安装es2015预设：

npm install babel-preset-es2015

然后配置babel-loader ：

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

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 配置中配置babel-loader ：

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

将.babelrc文件添加到节点模块所在的项目的根目录：

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

更多信息：

• babeljs.io - 在 webpack 中使用 babel

• babeljs.io - .babelrc 上的文档

• react-webpack-cookbook - 使用 webpack 配置 react

• 一个 react-webpack-example 存储库

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"]
    ]
}

Answer 4

巴贝尔团队更新：

我们对你尝试使用 ES2015 语法感到非常兴奋，但团队建议使用 babel-preset-env，而不是继续每年进行预设。 默认情况下，它具有与之前的预设相同的行为，将 ES2015+ 编译为 ES5

如果你使用的是Babel 版本 7 ，你需要运行 npm install @babel/preset-env并在你的.babelrc配置中有 "presets": ["@babel/preset-env"] 。

这会将所有最新功能编译为es5转译代码：

先决条件：

1. 网页包 4+
2. 通天塔 7+

Step-1: : npm install --save-dev @babel/preset-env

Step-2：为了将JSX代码编译为 es5，babel 提供了@babel/preset-react包，用于将 react jsx扩展文件转换为原生浏览器可理解的代码。

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

步骤 4：在webpack.config.js所在项目的根路径路径中创建.babelrc文件。

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

第五步： 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"
         })
    ]
}

Answer 5

就我而言，由于导入路径错误，我遇到了这样的错误：

错误： import Select from "react-select/src/Select"; // it was auto-generated by IDE ;) import Select from "react-select/src/Select"; // it was auto-generated by IDE ;)

正确： import Select from "react-select";

Answer 6

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

你的 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'
  }
};

另一个需要注意的是 args 的变化，你应该阅读 babel 文档https://babeljs.io/docs/en/presets

.babelrc

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

注意：您必须确保在您的 package.json 依赖项中安装了上述 @babel/preset-env 和 @babel/preset-react

Answer 7

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

Component -> Component.js

Answer 8

这让我觉得自己很愚蠢，但我想与像我一样感到沮丧的人分享：我使用webpack.dev.js ，但没有将其指定为配置文件！ 运行 Webpack 时运行：

webpack --config webpack.dev.js

它突然起作用了；）

Answer 9

使用打字稿时：

在我的例子中，我使用了他们文档页面中较新的 webpack v3.11 语法，我只是从他们的网站复制了 css 和样式加载器配置。 注释掉的代码（较新的 API）会导致此错误，见下文。

  module: {
        loaders: [{
                test: /\.ts$/,
                loaders: ['ts-loader']
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
        // ,
        // rules: [{
        //     test: /\.css$/,
        //     use: [
        //         'style-loader',
        //         'css-loader'
        //     ]
        // }]
    }

正确的做法是这样写：

    {
        test: /\.css$/,
        loaders: [
            'style-loader',
            'css-loader'
        ]
    }

在 loader 属性的数组中。

Answer 10

这个让我兜兜转转。 Angular 7，Webpack 我找到了这篇文章，所以我想感谢这篇文章https://www.edc4it.com/blog/web/helloworld-angular2.html

解决方案是什么：//在您的组件文件上。 use template as webpack 会将其视为文本模板： require('./process.component.html')

让业力解释它 npm install add html-loader --save-dev { test: /.html$/, use: "html-loader" },

希望这可以帮助某人

Answer 11

只是添加另一个原因，在 Angular 中出现此类错误 .. 是因为我检查了样式列表中的 html 文件：

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

解决错误的文件类型会引发此错误

Answer 12

只需添加此代码 webpackmix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css',  [
        require('tailwindcss'),
    ]).vue();

Answer 13

由于问题没有指定它是针对 angular、react 还是 react-native。 我为react-native发布此内容，也可能暗示其他人。 原因是它无法理解 loader 指定的语法。 例如tsx ， jsx 。 经过大量探索，我在本文中找到了一个解决方案。 当我们使用使用jsx的外部库并且您使用tsx配置项目时，它不会理解jsx并会让您添加适当的加载器。 因此，您可以通过在app.json文件中执行以下代码来解决此问题。

"web": {
  "build": {
    "babel": {
      "include": [
        "name-of-my-shared-package-here"
      ]
    }
  }
}

通过将name-of-my-shared-package-here替换为导致问题的 package 名称将解决此问题。 您可以检查导致此问题的错误 package 名称。

Answer 14

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 个小时。 我希望其他人不要浪费同样多的时间。