Webpack 2を使用して暑さをリロードする方法は？

Question

私はWebpack2、webpack-dev-middleware、HMRを開発用に使用するReactアプリケーションの設定に取り組んでいます。 Reactコンポーネントを変更するたびに、ブラウザは意図したとおりに更新されます。私が実行している問題は、.scssファイルを変更すると、ブラウザがでなく、が更新されます。代わりに、何が起こるか、コンソールでは、以下の私に与えることである。この後

[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. 

、私はページを更新するとき、私のスタイルの変更が表示されます。私は何が起こっているのか全くわからないか、問題が由来しますが、いくつかの助けをしたいと思いますし、clarification.Belowは私の設定です：

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クライアント側でのWebPACK-DEV-ミドルウェアを使用して

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

その内容が抽出されているようにCSSを表すあなたのバンドル内の対応するモジュールが空であるため、あなたが extract-text-webpack-pluginとWebPACKの後に使用している

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

は、webpack-dev-middlewareは何も変わっていないと考えているバンドルを再構築します。

HMRを取得するには、開発中にextract-text-webpack-pluginを無効にする必要があります。 disable optionを使用すると<style>タグを挿入するstyle-loaderにフォールバックします。代わりに、あなたはNODE_ENV=productionのように環境変数を使用し、プラグインで使用することができ、プラグインの2つのバージョンを定義する必要の

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

：明確な応答とコンテキストの

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