WebPack-dev-serwer z ciepłą reload przeładunkowego całą stronę z CSS zmienia

Question

[Edytuj] Github Test Repo Created for you to test!!

---

Mam gorącą przeładunku bez żadnych problemów, ale wczytuje całą stronę ilekroć robię pojedyncza zmiana css. Chciałbym wprowadzić wszelkie zmiany w CSS i najlepiej zrobić to samo z komponentami reagującymi, chyba że naprawdę potrzebne jest pełne przeładowanie.

** uzyskać następujące dzienniki konsoli **

[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); 

losowy składnik

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 
     }] 
     ] 
    } 
    } 
} 

Answer 1

można użyć ekstrakt WebPACK tekst wtyczki dla css gorąco zamiast przeładowywania całej strony/modułu ponowne ładowanie. poniżej wytyczne wiedzieć, jak korzystać https://github.com/webpack-contrib/extract-text-webpack-plugin https://www.npmjs.com/package/extract-text-webpack-plugin