Fatal编程技术网
  • javascript/
  • Javascript Webpack4 | Redux | React问题-您可能需要适当的加载程序来处理此文件类型

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

javascript node.js reactjs webpack redux

Javascript Webpack4 | Redux | React问题-您可能需要适当的加载程序来处理此文件类型,javascript,node.js,reactjs,webpack,redux,Javascript,Node.js,Reactjs,Webpack,Redux,我正在尝试Webpack4/Redux/React，我的示例应用程序出现以下错误： ./src/index.js]210字节{main}[builded][failed][1错误] +13个隐藏模块 ./src/index.js模块解析失败时出错：意外令牌（3:16） 您可能需要适当的加载程序来处理此文件类型进口 从“React”；| |作出反应常量元素=你好，世界；||@ 多网页包开发服务器/客户端？ webpack/hot/only dev server./src/index i｢wdm｣：

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

./src/index.js]210字节{main}[builded][failed][1错误] +13个隐藏模块

./src/index.js模块解析失败时出错：意外令牌（3:16） 您可能需要适当的加载程序来处理此文件类型进口 从“React”；| |作出反应常量元素=你好，世界；||@ 多网页包开发服务器/客户端？ 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']
  }
};

import React from 'react';

const element = <h1>Hello, world</h1>;
src/index.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']
  }
};

import React from 'react';

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

从“React”导入React；
常量元素=你好，世界；
您的
模块/加载程序
需要
测试中的另一个子句：
这需要是
测试：/\（js | jsx）$/，
，因为您使用的是
.js
文件，而不是
.jsx
。另外，在使用
.js
而不是关闭
.jsx
时，最好将其包含在配置中：
解析：{extensions:['.js']}，
。还要取消对第二个加载程序的注释，因为我看到您正在使用
.css
这需要
css加载程序才能工作

您还必须将
css加载程序
和
babel加载程序
添加到您的devdependency中

另外，您正在使用
webpack4
，这意味着
ExtractTextPlugin
已被弃用，因此请删除此项


希望这有帮助，祝你好运
 您的
模块/加载程序
需要在
测试中使用另一个子句：
这需要是
测试：/\（js | jsx）$/，
，因为您使用的是
.js
文件和no
.jsx
。另外，在使用
.js
而不是关闭
.jsx
时，最好将其包含在配置中：
解析：{extensions:['.js']}，
。还要取消对第二个加载程序的注释，因为我看到您正在使用
.css
这需要
css加载程序才能工作

您还必须将
css加载程序
和
babel加载程序
添加到您的devdependency中

另外，您正在使用
webpack4
，这意味着
ExtractTextPlugin
已被弃用，因此请删除此项


希望这有帮助，祝你好运
 在
webpack.config.js
中，您应该遵循中描述的方案

这里有一个例子


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



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

这里有一个例子


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



您刚刚编写了
loader:
4次。如果您对对象有任何了解，您就会知道不能有多个具有相同键的项。第二，你有没有看清楚如何使用多个加载器的网页文档？接下来您将编写
ExtractTextPlugin.extract
作为字符串，但它是一个函数。。。同样的JS原则也适用于webpack配置，你看过他们github上的文档了吗？我建议您遵循webpack快速入门指南。您只编写了
loader:
4次。如果您对对象有任何了解，您就会知道不能有多个具有相同键的项。第二，你有没有看清楚如何使用多个加载器的网页文档？接下来您将编写
ExtractTextPlugin.extract
作为字符串，但它是一个函数。。。同样的JS原则也适用于webpack配置，你看过他们github上的文档了吗？我建议您遵循《网页快速入门指南》。