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)$/。这使Web Pack知道要使用对象中定义的给定配置加载哪些文件。您提到的错误文件是.js文件。如果要使用相同的配置加载该文件，则需要将test修改为test: /\.(js|jsx)$/,。所以应该看起来像这样。

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

我还没有对此进行深入研究...因此，请lmk来解决您的问题。祝你好运！

react关键字扩展不会出现

1 个答案: