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

3706
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -21,7 +21,7 @@
},
"devDependencies": {
"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-inline-elements": "^6.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.2.6",
@ -49,6 +49,7 @@
"postcss-reporter": "^1.3.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.13.1",
"webpack-externals-plugin": "^1.0.0",
"webpack-manifest-plugin": "^1.1.0"
},
"engines": {
@ -105,6 +106,7 @@
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-helmet": "^5.1.3",
"react-hot-loader": "^4.1.2",
"react-inlinesvg": "^0.7.5",
"react-redux": "^5.0.6",
"react-router": "^3.2.0",
@ -124,7 +126,7 @@
"slugify": "^1.2.9",
"srcdoc-polyfill": "^0.2.0",
"url": "^0.11.0",
"webpack": "^2.6.1",
"webpack": "^3.1.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0",
"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 = {
devtool: 'cheap-module-eval-source-map',
entry: {
app: ['babel-polyfill',
app: [
'webpack-hot-middleware/client',
'react-hot-loader/patch',
'./client/index.jsx',
],
vendor: [
@ -47,11 +48,19 @@ module.exports = {
})
],
module: {
loaders: [
rules: [
{
test: /\.jsx?$/,
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$/,

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/'),
}),
],
};