webpack-dev-sunucu değiştirir

Question

[Düzenle] Github Test Repo Created for you to test!!

---

Ben herhangi bir sorun olmadan sıcak tekrar yüklenmesini var, ama ben yaptığınızda sayfanın tamamını yeniden yükler Tek bir css değişikliği. Tam bir yeniden yükleme gerçekten gerekli olmadıkça, herhangi bir css değişikliğini enjekte etmeyi ve ideal olarak reaksiyona giren bileşenlerle benzer şekilde yapmak isterim.

** Ben ** aşağıdaki konsol günlükleri almak

[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 yapılandırma

/* 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); 

Eğer css sıcak yerine tam sayfa/modülün yeniden yönelik özü metin webpack eklentisi kullanabilirsiniz

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

Rastgele bir bileşeni yeniden. `: aşağıdaki kılavuz Babil'de https://github.com/webpack-contrib/extract-text-webpack-plugin https://www.npmjs.com/package/extract-text-webpack-plugin