Webpack開發服務器和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的模塊無效模塊與導出並重新應用類名稱。

有一個在new documentation提供，2的WebPack，目前有beta分配標籤，您可以通過安裝npm i webpack@beta下提供一個發佈候選的例子。我建議您立即遷移並切換到react-hot-loader 3，根據next分發標籤提供，您可以通過npm i react-hot-loader@next進行安裝，兩者都應提供更好的體驗。但是，歡迎您使用您的現有版本。

對於HMR的工作，您需要有一個模塊需要您的React組件樹的根組件並將其呈現在RHL的容器下。這可以在具有簽名render(root)的函數中執行，您將在隨後每次調用作爲根模塊依賴關係圖一部分的模塊之一時調用該函數： // ./src/index.js import從'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) 
    }); 
}