React+webpack Development Environment Construction + Port modification

1). Create a new Mynew-react-web folder;

2). CD mynew-react-web;

3). NPM init, there will be a Package.json file at this time;

Installation package dependencies:
4). NPM Install Webpack webpack-dev-server--save-dev;

5). NPM Install Babel-core Babel-loader--save-dev;

6). NPM Install babel-preset-es2015 babel-preset-react--save-dev;

7). Type NUL>.BABELRC, new. babelrc file;

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

8). NPM Install babel-preset-es2015 babel-preset-react--save-dev;

9). NPM Install Htm-webpack-plugin--save-dev;

9). NPM Install Htm-webpack-plugin--save-dev;

Project directory:

Webpack.config.js File Contents

var path = require (' path ');
var webpack = require (' Webpack ');
var htmlwebpackplugin = require (' Html-webpack-plugin ');

var Root_path = path.resolve (__dirname);
var App_path = path.resolve (Root_path, ' APP ');
var Build_path = path.resolve (Root_path, ' BUILD ');

Module.exports = {
    entry:{
        app:path.resolve (app_path, ' app.jsx ')
    },
    output:{
        Path:build_path ,
        filename: ' Bundle.js '
    },
    devtool: ' Eval-source-map ',
    devserver:{
        historyapifallback: True,
        hot:true,
        inline:true,
        progress:true
    },
    module:{
        loaders:[{
            test:/\. jsx?$/,
            loaders:[' Babel-loader '],
            include:app_path
        }],
    },
    plugins:[
        New Htmlwebpackplugin ({
            title: ' My first react '
        })
}

Package.json File Contents

{
  "name": "Mynew-react-web",
  "version": "1.0.0",
  "description": "",
  "main": "Index.js",
  " Scripts ": {
    " test ":" Echo \ "Error:no test specified\" && exit 1 ",
    " Build ":" Webpack ",
    " dev ":" Webpac K-dev-server--hot "
  },
  " author ":" Lyn ",
  " license ":" ISC ",
  " Devdependencies ": {
    " Babel-core " : "^6.26.0",
    "Babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^ 6.24.1 ",
    " Eslint ":" ^4.17.0 ",
    " Eslint-loader ":" ^1.9.0 ",
    " Html-webpack-plugin ":" ^2.30.1 ",
    " React ":" ^16.2.0 ",
    " React-dom ":" ^16.2.0 ",
    " Webpack ":" ^2.7.0 ",
    " Webpack-dev-server ":" ^2.1.0- beta.10 "
  },
  " dependencies ": {}
}

APP.JSX File Contents

Import React from ' React ';
Import reactdom from ' React-dom ';

Class App extends react.component{
    Constructor (props) {
        super (props);
    }
    Render () {
        return (
            <div>
                
 
index.html File Contents

<! DOCTYPE html>
 
At this point: after NPM run dev

Port modified to 8181:
Package.json, change to