web-dev-qa-db-fra.com

webpack-dev-server avec rechargement à chaud rechargement de la page entière avec les modifications css

[Edit] Github Test Repo Créé pour vous permettre de tester !!

J'ai un rechargement à chaud sans aucun problème, mais il recharge la page entière à chaque fois que je fais un seul changement CSS. Je voudrais qu’il injecte tous les changements CSS et, idéalement, fasse de même avec les composants de réaction, sauf si une recharge complète est vraiment nécessaire.

** Je reçois les journaux de la console suivants **

[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

config webpack 

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

Une composante aléatoire 

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
        }]
      ]
    }
  }
}
javascriptreactjswebpackwebpack-dev-serverreact-hot-loader
14
Jamie Hutber

vous pouvez utiliser extraire le texte plugin webpack pour le rechargement à chaud css au lieu du rechargement de page entière/module. est le guide pour savoir comment utiliser https: //. github.com/webpack-contrib/extract-text-webpack-pluginhttps://www.npmjs.com/package/extract-text-webpack-plugin

1
RamiReddy P

Pour moi, cela ne fonctionnait pas car je n'avais pas de fichier .babelrc dans mon répertoire racine et avec le code ci-dessous à l'intérieur.

{
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}
0
Reyansh Mishra