[Edit] Github Test Repo Created for you to test!!
I have hot reloading without any problems, but it reloads the entire page whenever I make a single css change. I would like it to inject any css changes and ideally do similarly with react components unless a full reload is truly needed.
** I get the following console logs **
[WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
client?cd17:41 [WDS] App hot update...
dev-server.js:33 [HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:33
dev-server.js:34 [HMR] Error: Aborted because ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css is not accepted
Update propagation: ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css -> ./src/components/shared/userPages/userPages.css -> ./src/components/Signin/index.js -> ./src/routes.js -> ./src/index.js -> 0
at hotApply (http://localhost:8080/dist/main.js:430:30)
at hotUpdateDownloaded (http://localhost:8080/dist/main.js:283:13)
at hotAddUpdateChunk (http://localhost:8080/dist/main.js:263:13)
at webpackHotUpdateCallback (http://localhost:8080/dist/main.js:8:12)
at http://localhost:8080/dist/0.75f9c418ba8b1fdc9ad0.hot-update.js:1:1
webpack config
/* eslint-disable */
const Config = require('webpack-config').default;
const webpack = require('webpack');
const DashboardPlugin = require('webpack-dashboard/plugin');
const {environment} = require('webpack-config');
const path = require('path');
environment.set('cssIdent', '[path]___[name]__[local]___[hash:base64:5]');
module.exports = new Config().extend('./webpack.base.config.js').merge({
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
devServer: {
contentBase: [
'demo/'
],
hot: true,
historyApiFallback: true,
host: '0.0.0.0',
publicPath: '/dist/'
},
output: {
filename: 'main.js',
path: path.join(__dirname, 'dist'),
publicPath: '/dist/'
},
devtool: 'inline-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
BABEL_ENV: JSON.stringify('development')
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new DashboardPlugin()
],
cache: true
});
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { AppContainer } from 'react-hot-loader';
import { ConnectedRouter } from 'react-router-redux'
import injectTapEventPlugin from 'react-tap-event-plugin';
import nprogress from 'nprogress';
import store from './configureStore';
import Routes from './routes';
import './components/shared/main.css';
import createHashHistory from 'history/createHashHistory'
const history = createHashHistory({
hashType: 'slash'
});
//Remove on screen tap delay
injectTapEventPlugin();
//Add progress bar
nprogress.configure({ minimum: 0.15, showSpinner: false, speed: 500 });
// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'))
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<ConnectedRouter history={history}>
<Routes/>
</ConnectedRouter>
</Provider>
</AppContainer>,
document.getElementById('app')
);
Store.js
import { createStore, applyMiddleware, compose } from 'redux'
import { createLogger } from 'redux-logger'
import { routerMiddleware } from 'react-router-redux'
import reducers from './reducers';
const configureStore = function (history, preloadedState = {}) {
// Build the middleware for intercepting and dispatching navigation actions
const middlewareHistory = routerMiddleware(history);
const store = createStore(
reducers,
preloadedState,
compose(
applyMiddleware(createLogger(), middlewareHistory)
)
);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('./reducers', () => {
const nextReducer = require('./reducers').default;
store.replaceReducer(nextReducer);
});
}
return store;
};
export default configureStore(history);
A random component
import React from 'react';
import { NavLink } from 'react-router-dom'
import store from '../../configureStore';
import userStyles from '../shared/userPages/userPages.css';
class SignIn extends React.Component {
render(){
return (
<div className={userStyles.home}>
</div>
);
}
}
export default SignIn;
.babelrc
{
"presets": [
["es2015", {"modules": false}],
"stage-0",
"react"
],
"plugins": [
"react-hot-loader/babel"
],
"env": {
"development/client": {
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}]
]
},
"test": {
"presets": ["es2015"],
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}]
]
}
}
}
