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中为Webpack 2提供了一个示例，该示例目前在beta分发标记下提供了候选发布版，您可以通过npm i webpack@beta进行安装。我建议您立即迁移并切换到react-hot-loader 3，next分发标记下的npm i react-hot-loader@next分发标记，您可以通过render(root)进行安装，这两者都可以提供更好的体验。但是，欢迎您使用现有版本。

要使HMR正常工作，您需要拥有一个需要React组件树的根组件并在RHL容器下呈现它的模块。这可以在具有签名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) }); }的函数中执行，每次作为根模块的依赖关系图的一部分时，您将调用该函数： // ./src/index.js 从'react'导入React; 从'react-dom'中导入ReactDOM;

curl -XDELETE 'localhost:9200/_snapshot/backups?pretty'

Webpack dev服务器和css模块

1 个答案: