Question

我的代码在一小时前运行良好，但突然显示以下错误。我不记得进行任何具体更改。 ./src/index.js 5:16中的错误模块解析失败：意外的令牌（5:16）您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders |从“ ./components/App”导入应用； |

ReactDOM.render（，document.getElementById（'app'））; ｢wdm｣：无法编译。'

我的webpack配置文件是webpack.config.js，它是

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


module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js'
    },
    module : {
        rules: [
            {
                test: /\.svg$/,
                loader: 'svg-inline-loader'
            },
            {
                test: /\.js$/,
                exclude: /node-modules/,
                use: 'babel-loader' 
            },
            {
            test:/\.(s*)css$/,
            use:['style-loader','css-loader', 'sass-loader']

            },
            {
                test: /\.(jpg|png)$/,
                use: {
                  loader: 'url-loader',
                },
              },
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
                template:'./src/index.html'
            }),
            // new MiniCssExtractPlugin({
            //          filename: isDevelopment ? '[name].css' : '[name].[hash].css',
            //       chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
            //         })
    ]
}

App.js与

import React, { Component } from 'react';



class App extends Component {
    render() {
        return (
                <div className="">
                <h1>Checkk</h1>
                   </div>     
        )
    }
}

export default  App;

我的index.js为

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

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

请帮助！1

您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来使用React和Babel处理该文件

0 个答案: