首页 文章

Webpack4 | Redux | React Issue - 您可能需要一个合适的加载器来处理此文件类型

提问于
浏览 次
0

我正在尝试使用Webpack4 / Redux / React并为我的示例应用程序获取以下错误：

./src/index.js] 210字节 [built] [failed] [1 error] 13个隐藏模块./src/index.js中的错误模块解析失败：意外令牌（3:16）您可能需要适当的加载器来处理这种文件类型 . |从'react'导入React; | | const element =你好，世界; | | @ multi 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>;
javascript node.js reactjs webpack redux

2 回答

  • 0

    你的 module/loaders 需要 test: 中的另一个子句，这需要 test: /\.(js|jsx)$/, ，因为你使用的是 .js 文件而没有 .jsx . 此外，在您的配置中包含此功能也是一种很好的做法： resolve: { extensions: ['.js'] }, 使用 .js 而不是 .jsx . 同时取消注释第二个加载器，因为我看到你正在使用 .css 这需要 css-loader 才能工作 .

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

    你也在使用 webpack 4 ，暗示 ExtractTextPlugin 已被弃用，所以删除它 .

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

    回复于
  • 3

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

    这是一个例子

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

相关问题