webpack-dev-server với tải lại nóng tải lại toàn bộ trang với css thay đổi

Question

[Chỉnh sửa] Github Test Repo Created for you to test!!

---

Tôi có nạp lại nóng mà không cần bất kỳ vấn đề, nhưng nó tải lại toàn bộ trang bất cứ khi nào tôi làm một thay đổi css duy nhất. Tôi muốn nó để tiêm bất kỳ thay đổi css và lý tưởng tương tự như với các thành phần phản ứng, trừ khi một tải lại đầy đủ là thật sự cần thiết.

** Tôi có được giao diện điều khiển các bản ghi sau **

[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 cấu hình

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

Một thành phần ngẫu nhiên

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

bạn có thể sử dụng trích văn bản webpack Plugin cho css nóng tải lại thay vì toàn bộ trang/mô-đun tải lại. dưới đây là kim chỉ nam để biết cách sử dụng https://github.com/webpack-contrib/extract-text-webpack-plugin https://www.npmjs.com/package/extract-text-webpack-plugin