webpack 出错 - 您可能需要适当的加载器来处理此文件类型

Posted 2023-02-16

【中文标题】webpack 出错 - 您可能需要适当的加载器来处理此文件类型

【英文标题】：error with webpack - You may need an appropriate loader to handle this file type

【发布时间】：2019-04-12 13:12:50

【问题描述】：

我正在学习 react 并尝试使用 webpack 创建样板。我按照教程遍历了他的视频作品中的所有内容，但在我的计算机上，我收到错误消息，需要适当的加载程序来处理特定的文件类型。

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

module.export = 
    entry: './src/index.js',
    output: 
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js'
    ,
    module: 
        rules: [
            
                test: /\.js$/,
                exclude: /node_modules/,
                use: 
                    loader: 'babel-loader'
                
            
        ]
    ,
    plugins: [
        new HtmlWebpackPlugin(
            template: './src/index.html'
        )
    ]

这是错误来自的文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('app'));

这是错误信息：

./src/index.js 中的错误 5:16 模块解析失败：意外令牌 (5:16) 您可能需要适当的加载程序来处理这种文件类型。 | 从'./components/App'导入应用程序； |

ReactDOM.render(, document.getElementById('app')); @multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]

【问题讨论】：

Babel 不理解 JSX (<App />) 开箱即用，所以你需要 React preset。

只要使用create-react-app

JSX 不是 javascript 或 HTML 的一部分。

【参考方案1】：

在您能够使用 JSX 语法之前，您需要在应用程序的根文件夹中的 .babelrc 文件中拥有一个预设列表。

这是一个例子

 
  "presets": [
    "flow", 
    "es2015",
    "react"
   ]

在此示例中，babel 将解释一个 JSX React 应用程序，具有 ES2015 引用和流静态类型语法。

查看this link 了解更多信息。