code@GitHub

npm init
npm i webpack
npm i react

project/build/webpack.config.js

const path = require('path') //absolute path for multiple OS
const HTMLPlugin = require('html-webpack-plugin') //npm i html-webpack-plugin -D

module.exports = {
  entry: {
    app: path.join(__dirname, '../client/app.js')
  },
  output: {
    filename: '[name].[hash].js', //[varible]
    path: path.join(__dirname, '../dist'),
    publicPath: ''//'/public' //static resource files reference path
  },
  module: {
    rules: [
      {
        test: /.jsx$/, //filename ends with .jsx
        loader: 'babel-loader'  //compile rules
        // npm i babel-loader -D
        // npm i babel-core -D
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: path.join(__dirname, '../node_modules')
      }
    ]
  },
  plugins: [
      new HTMLPlugin()  //generate html page and inject entries
  ]
}

project/client/app.js

//project entry file
import React from 'react' //otherwise Uncaught ReferenceError: React is not defined
import ReactDom from 'react-dom'  //npm i reacr-dom -S
import App from './App.jsx'

ReactDom.render(<App/>, document.body) //no App

project/client/App.jsx

//notation pages content
import React from 'react'

export default class App extends React.Component {
  render() {
    return (
            <div>This is app</div>
        )
  }
}

project/disk

//npm run build //will generate some packeged files

project/.babelrc

{
  "presets": [
    ["es2015", {"loose": true}], // support es6 &  not strict
    "react"
    //npm i babel-preset-es2015 babel-preset-es2015-loose babel-preset-react -D
  ]
}

project/package.json

{
  "name": "learn_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config build/webpack.config.js"
  },
  "keywords": [
    "webpck"
  ],
  "author": "JasonLiao(286630571@qq.com)",
  "license": "MIT",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-loose": "^8.0.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^2.30.1"
  }
}

that's all , happy hacking!