Webpack-dev-Server und CSS-Module

Question

Ich kann CSS-Module zu arbeiten, aber nicht in den Heiß-Neuladen.

Wenn zuerst geladen, wird die Art, wie es sein sollte:

Aber nachdem es bricht Änderungen an der CSS-Datei zu machen und eine vollständige Nachladen benötigt:

ich bin mit der CSS-Module wie folgt:

webpack.config.js

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const pack = { 
    entry: [ 
    path.join(__dirname, 'src/app/index.js'), 
    ], 
    output: { 
    path: path.join(__dirname, '/dist/'), 
    filename: '[name].js', 
    publicPath: '/', 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'src/app/index.html', 
     inject: 'body', 
     filename: 'index.html', 
    }), 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     include: /src\/app/, 
     loaders: [ 
      'style?sourceMap', 
      'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', 
     ], 
     }, 
     { 
     test: /\.js?$/, 
     include: /src\/app/, 
     loader: 'babel', 
     }, 
     { 
     test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/, 
     loader: 'url?limit=10000&mimetype=application/font-woff', 
     }, 
     { 
     test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, 
     loader: 'file', 
     }, 
    ], 
    }, 
}; 

module.exports = pack; 

webpack.development.config.js

const webpack = require('webpack'); 

const pack = require('./webpack.config'); 

pack.entry.unshift('react-hot-loader/patch'); 
pack.entry.unshift('webpack/hot/only-dev-server'); 
pack.entry.unshift('webpack-dev-server/client?http://localhost:3000'); 

pack.plugins.push(new webpack.HotModuleReplacementPlugin()); 
pack.plugins.push(new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify('development'), 
})); 

module.exports = pack; 

Wie ich bemerkt, die CSS-Klasse, dass es in der Komponente zu holen versucht Stills das gleiche, sollte nicht für jede Datei Änderung/Neuladen ein neuer Hash generiert werden?

Answer 1

Die HMR-API stellt eine kleine Laufzeit bereit, auf die über module.hot zugegriffen werden kann, mit der Sie interagieren müssen, um die Aktualisierungen zu konsolidieren und Änderungen am Status des Dokuments vorzunehmen, da sonst etwas übrig bleibt zu einem Live-Reload-Server, da Sie sich nicht für HMR entscheiden.

Sie haben sich selbst korrekt angegeben, dass jedes Update eine neue Gruppe von Klassennamen enthalten sollte, solange eine [hash] Variante verwendet wird, um den Namen zu konstruieren, also was benötigt wird, um die JS-Module ungültig zu machen Modul mit dem Export und wenden Sie die Klassennamen erneut an.

Es gibt ein Beispiel in den new documentation vorgesehen, für Webpack 2, die derzeit ein Release Candidate erhältlich unter dem beta Verteilung Tag hat, die Sie über npm i webpack@beta installieren können. Ich würde empfehlen, dass Sie sofort migrieren und wechseln zu react-hot-loader 3, verfügbar unter dem next Verteiler-Tag, das Sie über npm i react-hot-loader@next installieren können, die beide eine viel bessere Erfahrung bieten sollten. Sie können jedoch gerne Ihre vorhandenen Versionen verwenden.

Damit HMR funktioniert, benötigen Sie ein Modul, das die Root-Komponente Ihres React-Komponentenbaums benötigt und unter dem RHL-Container rendert. Dies kann in einer Funktion durchgeführt werden, die die Signatur render(root) hat, die Sie später jedes Mal aufrufen, wenn eines der Module Teil des Abhängigkeitsgraphen Ihres Wurzelmoduls ist: // ./src/index.js importieren Reagieren von 'reagieren '; ReactDOM von 'reac-dom' importieren;

import {AppContainer} from 'react-hot-loader'; 

import App from './components/app'; 

const render = (Component) => { 
    ReactDOM.render(
    <AppContainer> 
     <Component /> 
    </AppContainer>, 
    document.getElementById('root') 
); 
}; 

render(App); 

// Hot Module Replacement API 
if (module.hot) { 
    // Accept updates for all modules that are part of our root app component's 
    // module's dependency graph. 
    module.hot.accept('./components/app',() => { 
    // Re-render, allowing `react-hot-loaders` behavior to kick in, 
    // invalidating the whole React element tree. 
    render(App) 

    // If you are not using native ES6 export syntax, you will have to 
    // re-require the export again. 

    // const NewApp = require('./components/app').default 
    // render(NewApp) 
    }); 
}