Webpack devサーバーとCSSモジュール

Question

私はのCSSモジュールを動作させることはできますが、ホットリロードはできません。

最初にロードされ、スタイルはそれが必要な方法表示されます。

しかし、それは壊れるcssファイルに変更を加えると、完全なリロードが必要とされた後：

を

私は以下のようにCSSモジュールを使用しています：

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; 

私はそれがコンポーネントでフェッチしようとする、CSSクラスを気づいてきたようにまだ同じですが、各ファイルの変更/再読み込みのために新しいハッシュを生成すべきではありませんか？

Answer 1

HMR APIは、module.hotからアクセスする小さなランタイムを公開しています。これは、更新を統合してドキュメントの状態に変更を適用する必要があります。それ以外の場合は、あなたがHMRに入らないようにライブのリロードサーバに転送します。

[hash]バリアントがある場合は、各アップデートで新しいクラス名が提供されるはずですので、JSを参照するモジュールを無効にするためには何が必要なのですか？モジュールをエクスポートし、クラス名を再適用します。

現在あなたがnpm i webpack@beta経由でインストールすることができますbeta分布タグ、下で利用可能なリリース候補を持つWebPACKの2、のために、new documentationに提供された例があります。すぐに移行し、next配布タグの下にあるreact-hot-loader 3に切り替えることをお勧めします。これはnpm i react-hot-loader@next経由でインストールできますが、両方ともより良い体験を提供するはずです。ただし、既存のバージョンを使用することは歓迎します。

HMRを動作させるには、Reactコンポーネントツリーのルートコンポーネントを必要とするモジュールをRHLのコンテナの下にレンダリングする必要があります。これは、シグニチャrender(root)を持つ関数で実行できます。これは、その後、ルートのモジュールの依存関係グラフの一部であるモジュールの1つを呼び出すたびに呼び出されます。 // ./src/index.js import React from 'react '; 'react-dom'からReactDOMをインポートします。

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) 
    }); 
}