反应关键字扩展不接

Question

我已经尝试学习 webpack 有一段时间了，它似乎没有图像或 css 的问题...只是反应，我收到以下错误消息。它不认识它... 我已经尝试阅读和修复它很长一段时间了，所以如果我不是新手，任何帮助都将不胜感激。

在我的反应页面中

const img = require('./dog.jpeg');
require('./style.css');
import React from 'react';
import ReactDOM from 'react-dom';

class Page extends React.Component () {
  render(){
    return(
      <div>
        <p>A silly complicated way to show an HTML document</p>
      </div>
    );
  }
}

在我的 webpack.common.js 文件中

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

module.exports = {
  entry:{
    app: './src/index.js',

  },
  plugins : [
    new CleanWebpackPlugin(['../dist']),
    new HtmlWebpackPlugin({
      title: 'Web w react, express webpack dev n prod',

    })
  ],
  output : {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '../dist')
  },
  module : {
    rules:[
      // {
      //     test: /\.js$/,
      //     loader: 'babel-loader',
      //     exclude: /node_modules/,
      //     query: {presets: ['es2015']}
      //   },
        {
        test: /\.(jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/react']
          }
        }
      },
        // {
        //   test: /\.jsx$/,
        //   loader:'babel-loader',
        //   query: {presets: ['es2015', 'react']}
        // },
      {
        test:/\.(css|scss)$/,
        use:['style-loader', 'css-loader','sass-loader']
      },
      {
        test: /\.(png|jpeg|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              fallback: 'file-loader'
            }
          }
        ]
}
    ]
  }
}

error message that comes up 所有代码都在这个链接上 Link to this on Github

Answer 1

查看您的模块加载器规则。唯一可以远程文件加载 js 文件的规则是：

  {
    test: /\.(jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/react']
      }
    }
  },

现在看看test: /\.(jsx)$/。这让 webpack 知道使用对象中定义的给定配置加载哪些文件。您提到的错误文件是.js 文件。如果您希望使用相同的配置加载它，您需要将test 修改为test: /\.(js|jsx)$/,。所以它应该看起来像这样。

  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/react']
      }
    }
  },

我还没有深入研究这个......所以如果能解决你的问题，请 lmk。祝你好运！