[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 }] ] } } } 1 Answers
Answers 1
you can use extract text webpack plugin for css hot reloading instead of whole page/module reloading. below is the guideline to know how to use https://github.com/webpack-contrib/extract-text-webpack-plugin https://www.npmjs.com/package/extract-text-webpack-plugin
0 comments:
Post a Comment