Gewusst wie: Hot Sload mit Webpack 2 neu laden?

Question

Ich arbeite an der Einrichtung einer React-Anwendung, die Webpack2, Webpack-Dev-Middleware und HMR für die Entwicklung verwendet. Wenn ich eine React-Komponente ändere, wird sie wie beabsichtigt im Browser aktualisiert. Das Problem, auf das ich gestoßen bin, ist, dass der Browser, wenn ich meine .scss-Dateien ändere, nicht update. Was stattdessen passiert, ist, dass folgende in der Konsole es mir das gibt:

[HMR] bundle rebuilding 
client.js:207 [HMR] bundle rebuilt in 1567ms 
process-update.js:27 [HMR] Checking for updates on the server... 
process-update.js:98 [HMR] Nothing hot updated. 
process-update.js:107 [HMR] App is up to date. 

Danach, wenn ich die Seite aktualisieren, erscheinen mein Stil ändert. Ich bin nicht ganz sicher, was los ist oder wo das Problem ergibt sich aus aber würde etwas Hilfe und clarification.Below ist mein Setup:

Webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 
var autoprefixer = require('autoprefixer'); 
var DashboardPlugin = require('webpack-dashboard/plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var argv = require('yargs').argv; 

const config = {}; 

// This configured production 
if (argv.p) { 
    config.entry = [ 
     './src/client/scripts/index', 
     './src/client/scripts/utils/index', 
     './src/client/styles/index.scss' 
    ] 
    config.plugins = [ 
     new DashboardPlugin(), 
     new ExtractTextPlugin({ 
     filename: 'bundle.css', 
     allChunks: true 
     }), 
    ] 
} 
else { 
    config.entry = [ 
    'react-hot-loader/patch', 
    'webpack-hot-middleware/client', 
    './src/client/scripts/index', 
    './src/client/scripts/utils/index', 
    './src/client/styles/index.scss' 
    ] 
    config.plugins = [ 
    new DashboardPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new ExtractTextPlugin({ 
     filename: 'bundle.css', 
     allChunks: true 
    }) 
    ] 
} 

module.exports = { 
    entry: config.entry, 
    output: { 
    path: path.join(__dirname, 'src', 'client', 'static'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    devtool: 'inline-source-map', 
    devServer: { 
    hot: true, 
    contentBase: path.resolve(__dirname, 'src', 'client', 'static'), 
    publicPath: (__dirname, 'src', 'client', 'static') 
    }, 
    plugins: config.plugins, 
    module: { 
    rules: [ 
     { 
     test: /\.js?$/, 
     exclude: /(node_modules|bower_components)/, 
     include: path.join(__dirname, 'src'), 
     use: [ 
      { 
      loader: 'babel-loader', 
      query: { 
       presets: ['react', ['es2015', { 'modules': false }], 'stage-0'], 
       plugins: ['react-hot-loader/babel', 'react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     use: [ 
      { 
      loader: 'url-loader?limit=100000' 
      } 
     ], 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    } 
}; 

Server.js Verwendung webpack-dev-Middleware

const router = Router(); 
const clientDir = resolve(`${__dirname}/../../client`); 

if (isDev()) { 
    const webpackDevMiddleware = require('webpack-dev-middleware') 
    const webpack = require('webpack') 
    const webpackConfig = require('../../../webpack.config') 
    const webpackHotMiddleware = require('webpack-hot-middleware') 

    const compiler = webpack(webpackConfig) 

    // This compiles our app using webpack 
    router.use(webpackDevMiddleware(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    noInfo: true 
    })) 

    // This connects our app to HMR using the middleware 
    router.use(webpackHotMiddleware(compiler)) 
} 

router.use(express.static(clientDir)); 

export default router 

index.js auf Client-Seite

import React from 'react' 
import ReactDOM from 'react-dom' 
import { AppContainer } from 'react-hot-loader' 
import App from './App' 

const root = document.querySelector('.root'); 

// Wraps our App in AppContainer 
const render = (Component) => { 
    ReactDOM.render(
    <AppContainer> 
     <Component/> 
    </AppContainer>, 
    root 
); 
}; 

// Renders our application 
render(App); 

// This checks if a component has been updated 
// It then accepts the changes and replaced the module. 
// It's only checking if JS has been changed... 
// @TODO - it only works for JS not CSS. 
// I think this is an issue with webpack not 
// recognizing bundle.css as a dependency? 
if (module.hot) { 
    module.hot.accept(); 
} 

Answer 1

Sie extract-text-webpack-plugin und nach webpack mit neu erstellt das Bündel der webpack-dev-middleware denkt, dass sich nichts geändert, weil das entsprechende Modul in Ihrem Paket enthalten die CSS darstellt leer ist, ihren Inhalt extrahiert wurde.

Sie müssen extract-text-webpack-plugin in Entwicklung deaktivieren, um HMR zu erhalten. Sie können die disable option verwenden und es wird auf die style-loader zurückfallen, die die <style> Tags injiziert.

new ExtractTextPlugin({ 
    filename: 'bundle.css', 
    allChunks: true, 
    disable: true 
}) 

Statt zwei Versionen des Plug-in definieren, der mit Sie Umgebungsvariablen wie NODE_ENV=production verwenden können und es im Plugin verwenden:

new ExtractTextPlugin({ 
    filename: 'bundle.css', 
    allChunks: true, 
    disable: process.env.NODE_ENV !== 'production' 
})