diff --git a/.babelrc b/.babelrc index 12606a3..03350ba 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,7 @@ { - "stage": 0 + "presets": [ + "es2015", + "stage-0", + "react" + ] } diff --git a/README.md b/README.md index c48a435..d268f2f 100644 --- a/README.md +++ b/README.md @@ -13,11 +13,5 @@ npm install ## Running webpack-dev-server Using React Hot Loader ```sh -node ./node_modules/.bin/webpack-dev-server -``` - -## Using React Hot Loader and BrowserSync - -```sh -node ./server.js +npm start ``` diff --git a/package.json b/package.json index 5ea8738..955dd4e 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,23 @@ { "private": true, + "scripts": { + "start": "webpack-dev-server" + }, "devDependencies": { - "babel-core": "^5.8.29", - "babel-loader": "^5.3.2", - "browser-sync": "^2.9.11", - "css-loader": "^0.21.0", - "extract-text-webpack-plugin": "^0.8.2", - "react-hot-loader": "^1.3.0", + "babel-core": "^6.4.5", + "babel-loader": "^6.2.1", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "css-loader": "^0.23.1", + "extract-text-webpack-plugin": "^1.0.1", "style-loader": "^0.13.0", - "webpack": "^1.12.2", - "webpack-dev-middleware": "^1.2.0", - "webpack-dev-server": "^1.12.1", - "webpack-hot-middleware": "^2.4.1", - "write-file-webpack-plugin": "^1.0.0" + "webpack": "^2.0.6-beta", + "webpack-dev-server": "^2.0.0-beta" }, "dependencies": { - "react": "^0.14.0", - "react-css-modules": "^3.6.1", - "react-dom": "^0.14.0" + "react": "^0.15.0-alpha.1", + "react-css-modules": "^3.7.4", + "react-dom": "^0.15.0-alpha.1" } } diff --git a/src/UsingDecorator/index.js b/src/UsingDecorator/index.js deleted file mode 100644 index d961185..0000000 --- a/src/UsingDecorator/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import CSSModules from 'react-css-modules'; -import styles from './../table.css'; - -@CSSModules(styles) -export default class extends React.Component { - render () { - return
-
-
A0
-
B0
-
-
; - } -} diff --git a/src/UsingStyleName/index.js b/src/UsingStyleName/index.js index 82dfc4b..5604465 100644 --- a/src/UsingStyleName/index.js +++ b/src/UsingStyleName/index.js @@ -2,11 +2,27 @@ import React from 'react'; import CSSModules from 'react-css-modules'; import styles from './../table.css'; -class Table extends React.Component { +let Table; + +Table = class extends React.Component { + constructor(props) { + super(props); + + this.state = { + count: 0 + }; + + setInterval(() => { + this.setState({ + count: this.state.count + 1 + }); + }, 10); + } + render () { return
-
A0
+
A0 {this.state.count}
B0
; diff --git a/src/UsingStylesProperty/index.js b/src/UsingStylesProperty/index.js index 82dfc4b..ee01c60 100644 --- a/src/UsingStylesProperty/index.js +++ b/src/UsingStylesProperty/index.js @@ -2,11 +2,27 @@ import React from 'react'; import CSSModules from 'react-css-modules'; import styles from './../table.css'; -class Table extends React.Component { +let Table; + +Table = class extends React.Component { + constructor (props) { + super(props); + + this.state = { + count: 0 + }; + + setInterval(() => { + this.setState({ + count: this.state.count + 1 + }); + }); + } + render () { return
-
A0
+
A0 {this.state.count}
B0
; diff --git a/src/index.js b/src/index.js index 44c6947..f2c3d42 100644 --- a/src/index.js +++ b/src/index.js @@ -1,15 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; - import UsingStyleName from './UsingStyleName'; - import UsingStylesProperty from './UsingStylesProperty'; import UsingStylesPropertyStyles from './UsingStylesProperty/custom.css'; -import UsingDecorator from './UsingDecorator'; - ReactDOM.render(
-
, document.querySelector('#app')); diff --git a/webpack.config.browsersync.js b/webpack.config.browsersync.js deleted file mode 100644 index 53cc8bf..0000000 --- a/webpack.config.browsersync.js +++ /dev/null @@ -1,74 +0,0 @@ -var webpack, - path, - ExtractTextPlugin, - WriteFilePlugin, - devServer; - -webpack = require('webpack'); -path = require('path'); -ExtractTextPlugin = require('extract-text-webpack-plugin'); -WriteFilePlugin = require('write-file-webpack-plugin'); - -devServer = { - contentBase: path.resolve(__dirname, './endpoint'), - colors: true, - quiet: false, - noInfo: false, - publicPath: '/static/', - historyApiFallback: false, - host: '127.0.0.1', - port: 8000, - hot: true -}; - -module.exports = { - devtool: 'source-map', - debug: true, - devServer: devServer, - context: path.resolve(__dirname, './src'), - entry: { - app: [ - 'webpack/hot/dev-server', - 'webpack-hot-middleware/client', - - './' - ] - }, - output: { - path: path.resolve(__dirname, './endpoint/static'), - filename: '[name].js', - publicPath: devServer.publicPath - }, - plugins: [ - new WriteFilePlugin(), - new ExtractTextPlugin('app.css', { - allChunks: true - }), - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin(), - new webpack.OldWatchingPlugin(), - new webpack.NoErrorsPlugin() - ], - module: { - loaders: [ - { - test: /\.css$/, - loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') - }, - { - test: /\.js$/, - include: path.resolve(__dirname, './src'), - loaders: [ - 'react-hot', - 'babel' - ] - } - ] - }, - resolve: { - extensions: [ - '', - '.js' - ] - } -}; diff --git a/webpack.config.js b/webpack.config.js index 5f21c51..11404c9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,20 +15,19 @@ devServer = { publicPath: '/static/', historyApiFallback: false, host: '127.0.0.1', + lazy: true, port: 8000, - hot: true + hot: false }; module.exports = { - devtool: 'source-map', + devtool: 'eval-source-map', debug: true, devServer: devServer, context: path.resolve(__dirname, './src'), entry: { app: [ 'webpack-dev-server/client?http://' + devServer.host + ':' + devServer.port, - 'webpack/hot/only-dev-server', - './' ] }, @@ -41,9 +40,6 @@ module.exports = { new ExtractTextPlugin('app.css', { allChunks: true }), - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin(), - new webpack.OldWatchingPlugin(), new webpack.NoErrorsPlugin() ], module: { @@ -56,7 +52,6 @@ module.exports = { test: /\.js$/, include: path.resolve(__dirname, './src'), loaders: [ - 'react-hot', 'babel' ] }