okamuuu/spa-boilerplate.react-hot-replace.md

## spa-boilerplate.react-hot-replace.md

      
    Raw
  

              spa-boilerplate.react-hot-replace.md
            
          
    spa-boilerplate.react-hot-replace

mkdir practice-react && cd $_
mkdir src www
touch .babelrc webpack.config.js devServer.js src/index.js src/Root.js www/index.html
npm init -y
npm install --save-dev browser-sync webpack webpack-dev-middleware webpack-hot-middleware
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-plugin-react-hot
npm install --save-dev style-loader file-loader css-loader url-loader react-hot-loader

npm install --save jquery bootstrap
npm install --save babel-polyfill react react-dom

create .babelrc
{
  "presets": ["es2015", "stage-0", "react"]
}

create webpack.config.js
const path = require('path')
const webpack = require('webpack')

module.exports = {
  debug: true,
  devtool: 'inline-source-map',
  entry: [
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client',
    './src/index.js'
  ],
  output: {
    publicPath: "/",
    path: path.resolve('www'),
    filename: "bundle.js",
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: "jquery"
    })
  ],
  resolve: {
    extensions: ['', '.js'],
  },
  module: {
    loaders:[
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'] },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.svg$/, loader: 'url-loader?mimetype=image/svg+xml' },
      { test: /\.woff$/, loader: 'url-loader?mimetype=application/font-woff' },
      { test: /\.woff2$/, loader: 'url-loader?mimetype=application/font-woff' },
      { test: /\.eot$/, loader: 'url-loader?mimetype=application/font-woff' },
      { test: /\.ttf$/, loader: 'url-loader?mimetype=application/font-woff' }
    ]
  }
}
create devServer.js
const webpack = require('webpack')
const browserSync = require('browser-sync')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const historyApiFallback = require('connect-history-api-fallback')

const config = require('./webpack.config')
const bundler = webpack(config)

browserSync({
  open: false,
  server: {
    baseDir: config.output.path,
    index: "index.html",
    middleware: [
      webpackDevMiddleware(bundler, {
        publicPath: config.output.publicPath,
        stats: { colors: true }
      }),
      webpackHotMiddleware(bundler),
      historyApiFallback()
    ]
  },
  files: [
    'www/*.html'
  ]
})
create src/index.js
import React from 'react'
import { render } from 'react-dom'
import Root from './Root'

render(
  <Root />, 
  document.getElementById('root')
)

if (module.hot) {
  module.hot.accept('./Root.js', function() {
    const NextApp = require('./Root').default
    render(<NextApp/>, document.getElementById('root'))
  })  
}
create src/Root.js
import 'babel-polyfill'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
import React from 'react'

export default (props) => (
  <div className="container">
    <h1>React boilerplate</h1>
    <p>test</p>
  </div>
)
create www/index/html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

implement it
node devServer.js