首页 文章

webpack出错 - 您可能需要一个合适的加载程序来处理此文件类型

提问于
浏览
0

我正在学习反应并尝试使用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]

1 回答

  • 0

    在能够使用JSX语法之前,您需要在应用程序的根文件夹中的 .babelrc 文件中包含预设列表 .

    这是一个例子

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

    在这个示例中,babel将考虑使用ES2015引用和流静态类型语法的JSX React应用程序 .

    有关更多信息,请查看this link .

相关问题