Webpack + Babel错误 [英] Webpack + Babel error

问题描述

我正在尝试配置webpack并使其一切正常运行，但是现在却遇到了同样的错误.我梳理了其他几篇似乎已通过纠正拼写/语法错误解决的帖子，但是我似乎无法查明代码中有什么错误.有更严重的事情发生吗?

I am trying to configure webpack and had everything up and running, but am now getting this same error. I've combed through a few other posts that seem to have been resolved by correcting spelling/grammar errors, but I can't seem to pinpoint anything wrong in my code. Is there something more serious happening?

ERROR in ./src/components/App/App.js
Module parse failed: /Users/Desktop/fred/src/components/App/App.js Unexpected token (7:11)
You may need an appropriate loader to handle this file type.
| 
|   render() {
|         return (
|           <h1>Hello</h1>;
|         );
|     };
| 
@ ./src/index.js 3:0-39
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index

这是我的webpack.config:

Here is my webpack.config:

var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/build/',
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.png', '.json']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          autoprefixer
        ]
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loaders: ['react-hot-loader', 'babel-loader']
      },
      {
        test: /\.jsx?$/,
        loaders: ['react-hot-loader', 'babel-loader']
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=10000',
      }
    ],
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

我的App.js:

import React, { Component } from 'react';
import s from './App.scss';

class App extends Component {

  render() {
    return (
      <h1>Hello</h1>;
    );
  };

}

export default App;

我的index.js:

my index.js:

import React from 'react';
import { render } from 'react-dom';
import App from './components/App/App';

let element = React.createElement(App, {});
render(element, document.querySelector('.container'));

我的.babelrc:

my .babelrc:

{
  "presets" : ["es2015", "react", "stage-0"]
}

和我的package.json:

and my package.json:

{
  "name": "fred test",
  "version": "1.0.0",
  "description": "a fred test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "fred",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "postcss": "^5.2.17",
    "postcss-loader": "^1.3.3",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "normalize.css": "^6.0.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

推荐答案

问题是您同时定义了module.rules和module.loaders.只要存在module.rules，Webpack就会完全忽略module.loaders(仅出于兼容性原因而存在).在您的情况下，所有JavaScript规则都在module.loaders内部，因此都没有使用它们.

The problem is that you defined both module.rules and module.loaders. Webpack completely ignores module.loaders (which only exists for compatibility reasons) whenever module.rules is present. In your case, all JavaScript rules are inside module.loaders, so none of them are being used.

要修复此问题，请将所有内容放入module.rules中.而且对于.js文件也有两个规则，因为/\.js?$/匹配.j和.js，因为?表示出现一次或零次，类似地/\.jsx?$/匹配.js和.jsx，即您真正想要的是什么，而为.j制定规则是没有意义的.

To fix it put everything inside module.rules. And you also have two rules for .js files, as /\.js?$/ matches .j and .js, because ? means one or zero occurrences, similarly /\.jsx?$/ matches .js and .jsx, which is what you really want, and it doesn't make sense to have a rule for .j.

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loaders: ['react-hot-loader', 'babel-loader']
    },
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader']
    },
    {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
      loader: 'url-loader?limit=10000',
    },
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    }
  ]
}

这篇关于Webpack + Babel错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！