react.js - 创建react项目(利用webpack)报错

问题描述

问 题

通过npm载入的devDependencies为：

载入的dependencies

webpack的配置文件为：

var webpack = require('webpack');

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool:'source-map',
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {test: /\.js$/,exclude:/node_modules/, loader: 'babel-loader!react-hot-loader',query:{presets:['es2015','react']}}
    ]
  }
}

.bablerc文件为：

{
    "presets":["es2015","react"]
}

entry.js文件为：

'use strict';
import React from "react";
import ReactDOM from "react-dom";
import Name from "./name.js";
ReactDOM.render(
   <Name />,
   document.getElementById("a")
    );

name.js文件为：

'use strict';
import React from "react";
class Name extends React.Component{
    render(){
        return(
         <div>
             hello<input />
         </div>
            );
    }
}
export {Name as default};

之后想要通过webpack-dev-server --inline --hot命令编译出bundle.js
可是报错：

请问这是为什么呢？？

解决方案

去掉webpack配置中的react-hot-loader。

这篇关于react.js - 创建react项目(利用webpack)报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！