react.js - react npm + webpack 搭建错误

问题描述

问 题

学习用npm管理react，用webpack打包，配置完npm start 的时候出错了。
package.json是这样的：

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "practice",
  "main": "index.js",
  "scripts": {
   "start":"node server.js"
  },
  "keywords": [
    "react",
    "webpack"
  ],
  "author": "lxy",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.10.4",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "webpack": "^1.13.1"
  },
  "devDependencies": {
    "react-hot-loader": "^1.3.0",
    "webpack-dev-server": "^1.14.1"
  }
}

webpackage.config.js这样的：

 
     var webpack = require('webpack');

    module.exports={
    entry:'./js/index.js',
    output:{
        path:_dirname + '/js/',
        filename:'bundle.js',
        publicPath: '/js/'
    },
    module:{
        loaders:[
            {test:/\.js$/,loaders: ['babel-loader'],exclude: /node_modules/}
        ]
    },
    resolve:{
        extensions:['','.js','.jsx']
    }
};

server.js:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('webpack.config.js');

new WebpackDevServer(webpack(config),{
    publicPath: config.output.publicPath,
    hot:true,
    historyApiFallback: true
}).listen(3333,'localhost',function(err,result){
        if(err){
            console.log(err);
        }
        console.log('Listen at localhost:3333');
    });
    

index.js

var React = require('react');    
var HelloWorld = React.createClass({
    render:function(){
        return (
            <h1>helloworld!!</h1>
        );
    }
});
ReactDOM.render(<HelloWorld />,document.getElementById("app"));

错误信息：

解决方案

server.js里这句话改改：

var config = require('./webpack.config.js');//用相对路径

这篇关于react.js - react npm + webpack 搭建错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！