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

Question

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

./src/index.js] 210 bytes {main} [built] [failed] [1 error] + 13 hidden modules

ERROR in ./src/index.js Module parse failed: Unexpected token (3:16) You may need an appropriate loader to handle this file type. | import React from 'react'; | | const element =

Hello, world

; | | @ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./src/index i ｢wdm｣: Failed to compile.

我尝试了不同的方法来解决这个问题(从注释掉的代码中可以明显看出)，但没有成功。请让我知道我缺少什么。我的代码文件如下:

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

Answer 1

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

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

此外，您正在使用 webpack 4，这意味着 ExtractTextPlugin 已被弃用，因此请将其删除。

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