get hot loading working again

This commit is contained in:
Cassie Tarakajian 2018-05-02 17:34:03 -07:00
parent a7090f2404
commit 6afa760d36
6 changed files with 2163 additions and 1688 deletions

View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import { hot } from 'react-hot-loader';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router'; import { Router, browserHistory } from 'react-router';
import configureStore from './store'; import configureStore from './store';
@ -11,9 +12,15 @@ const history = browserHistory;
const initialState = window.__INITIAL_STATE__; const initialState = window.__INITIAL_STATE__;
const store = configureStore(initialState); const store = configureStore(initialState);
render( const App = () => (
<Provider store={store}> <Provider store={store}>
<Router history={history} routes={routes(store)} /> <Router history={history} routes={routes(store)} />
</Provider>, </Provider>
);
const HotApp = hot(module)(App);
render(
<HotApp />,
document.getElementById('root') document.getElementById('root')
); );

3714
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -21,7 +21,7 @@
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^7.1.1", "babel-eslint": "^7.1.1",
"babel-loader": "^6.2.4", "babel-loader": "^7.1.4",
"babel-plugin-transform-react-constant-elements": "^6.8.0", "babel-plugin-transform-react-constant-elements": "^6.8.0",
"babel-plugin-transform-react-inline-elements": "^6.8.0", "babel-plugin-transform-react-inline-elements": "^6.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.2.6", "babel-plugin-transform-react-remove-prop-types": "^0.2.6",
@ -49,6 +49,7 @@
"postcss-reporter": "^1.3.3", "postcss-reporter": "^1.3.3",
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
"webpack-externals-plugin": "^1.0.0",
"webpack-manifest-plugin": "^1.1.0" "webpack-manifest-plugin": "^1.1.0"
}, },
"engines": { "engines": {
@ -105,6 +106,7 @@
"react": "^16.2.0", "react": "^16.2.0",
"react-dom": "^16.2.0", "react-dom": "^16.2.0",
"react-helmet": "^5.1.3", "react-helmet": "^5.1.3",
"react-hot-loader": "^4.1.2",
"react-inlinesvg": "^0.7.5", "react-inlinesvg": "^0.7.5",
"react-redux": "^5.0.6", "react-redux": "^5.0.6",
"react-router": "^3.2.0", "react-router": "^3.2.0",
@ -124,7 +126,7 @@
"slugify": "^1.2.9", "slugify": "^1.2.9",
"srcdoc-polyfill": "^0.2.0", "srcdoc-polyfill": "^0.2.0",
"url": "^0.11.0", "url": "^0.11.0",
"webpack": "^2.6.1", "webpack": "^3.1.0",
"webpack-dev-middleware": "^1.6.1", "webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0", "webpack-hot-middleware": "^2.10.0",
"xhr": "^2.2.1" "xhr": "^2.2.1"

43
webpack.config.babel.js Normal file
View file

@ -0,0 +1,43 @@
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const cssnext = require('postcss-cssnext');
const postcssFocus = require('postcss-focus');
const postcssReporter = require('postcss-reporter');
module.exports = {
output: {
publicPath: '/',
libraryTarget: 'commonjs2',
},
resolve: {
extensions: ['', '.js', '.jsx'],
modules: [
'client',
'node_modules',
],
},
module: {
loaders: [
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader!postcss-loader'
})
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
loader: 'url-loader?limit=10000',
},
],
},
postcss: () => [
postcssFocus(),
cssnext({
browsers: ['last 2 versions', 'IE > 10'],
}),
postcssReporter({
clearMessages: true,
}),
],
};

View file

@ -4,8 +4,9 @@ require('dotenv').config();
module.exports = { module.exports = {
devtool: 'cheap-module-eval-source-map', devtool: 'cheap-module-eval-source-map',
entry: { entry: {
app: ['babel-polyfill', app: [
'webpack-hot-middleware/client', 'webpack-hot-middleware/client',
'react-hot-loader/patch',
'./client/index.jsx', './client/index.jsx',
], ],
vendor: [ vendor: [
@ -47,11 +48,19 @@ module.exports = {
}) })
], ],
module: { module: {
loaders: [ rules: [
{ {
test: /\.jsx?$/, test: /\.jsx?$/,
exclude: [/node_modules/, /.+\.config.js/], exclude: [/node_modules/, /.+\.config.js/],
loaders: ['babel-loader', 'eslint-loader'] use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: ['react-hot-loader/babel'],
}
}, {
loader: 'eslint-loader'
}]
}, },
{ {
test: /\.scss$/, test: /\.scss$/,

62
webpack.config.server.js Normal file
View file

@ -0,0 +1,62 @@
const fs = require('fs');
const path = require('path');
const ExternalsPlugin = require('webpack-externals-plugin');
module.exports = {
entry: path.resolve(__dirname, 'server/server.js'),
output: {
path: __dirname + '/static/dist/',
filename: 'server.bundle.js',
},
target: 'node',
node: {
__filename: true,
__dirname: true,
},
resolve: {
extensions: ['', '.js', '.jsx'],
modules: [
'client',
'node_modules',
],
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
'react',
'es2015',
'stage-0',
],
plugins: [
[
'babel-plugin-webpack-loaders', {
'config': './webpack.config.babel.js',
"verbose": false
}
]
]
},
}, {
test: /\.json$/,
loader: 'json-loader',
},
],
},
plugins: [
new ExternalsPlugin({
type: 'commonjs',
include: path.join(__dirname, './node_modules/'),
}),
],
};