Hello，world

Question

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

./ src / index.js] 210字节{main} [built] [failed] [1 error]       + 13个隐藏的模块
      ./src/index.js中的错误模块解析失败：意外的令牌（3:16）   您可能需要适当的加载程序来处理此文件类型。 |进口   从'反应'反应; | | const element =

Hello，world
; | | @   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>;

Answer 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，因此请将其删除。

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

Answer 2

在webpack.config.js中，您应该遵循webpack docs

中描述的方案

这是一个例子

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

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

Hello，world

2 个答案: