1

我可以使css 模块工作，但不能在热重载中工作。

首次加载时，样式以应有的方式显示：

带有 css 模块的类名

但是在对 css 文件进行更改后，它会中断，并且需要完全重新加载：

热重载不适用于 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 类仍然相同，不应该为每个文件更改/重新加载生成一个新的哈希吗？

4

1 回答 1

0

HMR API 公开了一个小型运行时，可以通过 访问module.hot，您必须与之交互才能整合更新并将更改应用到文档的状态，否则您将得到类似于实时重新加载服务器的东西因为您没有选择加入 HMR。

您已经正确地声明了每次更新都应该为您提供一组新的类名，只要有一个[hash]用于构造名称的变体，那么需要它来使引用 JS 模块的模块无效，并且导出和重新应用类名。

新文档中提供了一个针对 Webpack 2 的示例，该示例当前在分发标签下有一个发布候选版本beta，您可以通过npm i webpack@beta. 我建议您立即迁移并切换到react-hot-loader3，在next分发标签下可用，您可以通过 安装npm i react-hot-loader@next，这两者都应该提供更好的体验。但是，欢迎您使用现有版本。

要使 HMR 工作，您需要有一个模块，该模块需要您的 React 组件树的根组件，并将其呈现在 RHL 的容器下。这可以在具有签名的函数中执行，render(root)随后您将在每次作为根模块依赖关系图的一部分的模块之一时调用该函数： // ./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)
  });
}
于 2016-12-24T15:23:20.803 回答