1

我正在尝试使用反应热加载程序。在终端中运行“npm start”命令时出现错误。有人可以告诉我是什么问题。我正在努力让反应热加载程序工作但没有在浏览器中启动任何东西。

index.js

import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import allReducers from './reducers'
import App from './Components/App'
import injectTapEventPlugin from 'react-tap-event-plugin';

const store = createStore(allReducers);
injectTapEventPlugin();
ReactDOM.render(
    <Provider store = {store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

终端错误

webpack.config.js 文件

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devServer: {
        inline: true,
        contentBase: './src',
        port: 3000
    },

    devtool: 'eval',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './dev/js/index.js'
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot', 'babel'],
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'src'),
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()

    ]
};

包.json

{
  "name": "react-redux-template",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack",
    "start": "node server.js"
  },
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-register": "^6.9.0",
    "cross-env": "^1.0.8",
    "css-loader": "^0.23.1",
    "expect": "^1.20.1",
    "material-ui": "^0.15.4",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.8.0",
    "react": "^15.3.1",
    "react-addons-test-utils": "^15.1.0",
    "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
    "react-tap-event-plugin": "^1.0.0",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  },
  "devDependencies": {
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-stage-0": "^6.5.0",
    "react-hot-loader": "^1.3.0",
    "react-transform-hmr": "^1.0.4"
  }
}
4

1 回答 1

0

通常当我收到这样的错误时，是由于无法转换 jsx。在你的情况下，我相信这是因为你没有使用 babel-loader 来完成它。此外，如果您想使用礼物，您需要将它们作为查询参数包含在 babel-loader 中。我也喜欢排除节点模块以减少编译时间。

{
  loader: 'babel-loader',
  query: {
     presets:['es2015','react','stage-0'] // Babel presets, I use stage-0 
  },
  test: /\.js$/,
  exclude: /node_modules/,
}
于 2016-09-03T22:31:28.243 回答