使用Web包解析模块失败

Question

嗨，我是学生开发者。我面临这样的错误

./src/index.js 5:16模块解析失败时出错：意外标记（5:16）您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看见https://webpack.js.org/concepts#loaders |从“../src/components/App”导入应用程序|

ReactDOM.render（，document.getElementById（“app”）；i（wdm）：编译失败。

我开始学习webpack是什么，但我没有足够的信息来解决这个问题。你能帮我解决这个问题吗？

package.json开发部分：

 "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

我的webconfig：

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'
        })
    ]
}

index.js

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

// Error is he
ReactDOM.render(<App />,document.getElementById("app"));

pp.js：

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello</h1>
            </div>
        );
    }
}

export default App;

Answer 1

你需要告诉webpack，你正在编译反应。您需要将您的规则更新为：

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: /\.js?$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: {
            presets: ["react"]
          }
       }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

Answer 2

您的网页包配置中有两个错误，导致此问题。

>

有一个错别字错误。把module.export改成module.exports（这个让我抓狂man： P）

正如@Muhammad所提到的，您需要提到webpack来编译react。因此，我添加了“@babel/react”作为巴贝尔加载器的预设。

下面是为我工作的webpack：

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 : /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
        options: {
          presets: [
            '@babel/react',
            
          ]
        }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}