Webpack4ReduxReact问题-您可能需要一个适当的加载程序来处理此文件类型

Question

我尝试使用WebPack4/Redux/React，并在示例应用程序中得到以下错误：

./src/index.js]210字节{主}[生成][失败][1个错误]+13个隐藏模块

./src/index.js模块解析失败中的错误：意外标记（3:16）您可能需要一个适当的加载程序来处理此文件类型。从“React”导入React；常量元素=

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

{
  "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>;

Answer 1

您的模块/加载器需要test:中的另一个子句，这需要是test:/\.(jsjsx)$/,，因为您使用的是.js文件，而没有.jsx。此外，在使用.js而不是off.jsx时，最好将此内容包含在配置中:resolve:{extensions:['.js']}，。另外，取消对第二个加载器的注释，因为我看到您使用的是.css这需要css-loader来工作。

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

此外，您使用的是WebPack4，这意味着ExtractTextPlugin已被弃用，因此请删除它。

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