Webpack4|Redux|React 问题 - 您可能需要适当的加载器来处理此文件类型

Posted 2023-02-16

【中文标题】Webpack4|Redux|React 问题 - 您可能需要适当的加载器来处理此文件类型

【英文标题】：Webpack4|Redux|React Issue - You may need an appropriate loader to handle this file type

【发布时间】：2018-11-10 05:54:03

【问题描述】：

我正在尝试使用 Webpack4/Redux/React，但我的示例应用程序出现以下错误：

./src/index.js] 210 字节 main [构建] [失败] [1 错误] + 13 个隐藏模块

./src/index.js 模块解析失败：意外令牌 (3:16) 您可能需要适当的加载程序来处理此文件类型。 |进口 从“反应”做出反应； | |常量元素 =

你好，世界

; | | @ 多 webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./src/index i ｢wdm｣: 编译失败。

我尝试了不同的方法来解决这个问题（从注释掉的代码中可以看出）但没有任何成功。请让我知道我错过了什么。我的代码文件如下：

Package.json：

  "name": "react-redux-example",
  "version": "1.0.0",
  "description": "using redux architecture",
  "main": "node server.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1"
  ,
  "repository": 
    "type": "git",
    "url": "git"
  ,
  "keywords": [
    "reactjs",
    "redux",
    "react",
    "hot",
    "reload",
    "live",
    "edit",
    "webpack"
  ],
  "author": "newbieToReact",
  "license": "MIT",
  "dependencies": 
    "babel": "^6.23.0",
    "mkdirp": "^0.5.1",
    "react": "^16.4.0",
    "react-router": "^4.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.10.2",
    "webpack-dev-server": "^3.1.4"
  ,
  "devDependencies": 
    "extract-text-webpack-plugin": "^4.0.0-beta.0"
  

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var devFlagPlugin = new webpack.DefinePlugin(
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'true'))
);

module.exports = 
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  mode: "development",
  output: 
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  ,
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    //new webpack.NoErrorsPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    devFlagPlugin,
    new ExtractTextPlugin('app.css')
  ],
//  module: 
//    loaders: [
//      
//        test: /\.jsx?$/,
//        loaders: ['react-hot', 'babel'],
//        include: path.join(__dirname, 'src')
//      ,
//       test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader?module!cssnext-loader') 
//    ]
//  ,


//module: 
//    rules: [
//      
//        exclude: '/node_modules/',
        //test: /\.jsx?$/,
        //test: /\.js$/,
//        test: /\.(js|jsx)$/,
//        include: path.join(__dirname, 'src'),
//        test: /\.css$/,
//        use: [
//           loader: "react-hot" ,
//           loader: "babel" ,
//           loader: "ExtractTextPlugin.extract('css-loader?module!cssnext-loader')",
//           loader: "style-loader" ,
//        ]
//      
//    ]
//  ,


module: 
    rules: [
      
        exclude: '/node_modules/',
        test: /\.(js|jsx)$/,
        include: path.join(__dirname, 'src'),
        test: /\.css$/,
        loader: "react-hot",
        loader: "babel",
        loader: "ExtractTextPlugin.extract('css-loader?module!cssnext-loader')",
        loader: "style-loader",
      
    ]
  ,

  resolve: 
    extensions: ['.js', '.json']
  
;

src/index.js

import React from 'react';

const element = <h1>Hello, world</h1>;

【问题讨论】：

你刚刚写了4次loader:。如果您对对象有所了解，您就会知道您不能拥有多个具有相同键的项目。其次，您是否查看了清楚地显示如何使用多个加载器的 webpack 文档？接下来你将ExtractTextPlugin.extract写成一个字符串，但它是一个函数......同样的JS原则适用于webpack配置，你看过他们github上的文档吗？我建议你遵循 webpack 快速入门指南。

【参考方案1】：

您的module/loaders 需要test: 中的另一个子句，这需要是test: /\.(js|jsx)$/,，因为您使用的是.js 文件而不是.jsx。在你的配置中包含这个也是一个好习惯：resolve: extensions: ['.js'] , 当使用.js 而不是.jsx 时。还要取消注释第二个加载程序，因为我看到您使用的是 .css 这需要 css-loader 才能工作。

您还必须将 css-loader 和 babel-loader 添加到您的 devDependencies。

您还使用了webpack 4，这意味着ExtractTextPlugin 已被弃用，因此请删除它。

希望这有帮助，祝你好运！

【参考方案2】：

在webpack.config.js 中，您应该遵循webpack docs 中描述的方案

这是一个例子

  rules: [
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
  , 
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
  ]