Carduelis
@Carduelis
Web-developer, front-end, js, less

Webpack hot css reload с включенным HMR перестает работать, как исправить?

Доброго времени суток!
Нашел в сети готовый boilerplate для react-web-native-app. Все бы норм, но автор не решил проблему с работой hot-reloading less при включенном HMR.
Если я в конфиге комментирую строчку new webpack.HotModuleReplacementPlugin(), то стили рекомпилятся без перезагрузки страницы. Все как положено.
Если я ее включаю, то каждое сохранение файла вызывает перезагрузку.
Провентилировав вопрос в сети, многие пишут, что проблема в extract-text-webpack-plugin, но я его не использую.
Может быть есть какие догадки?

Полный webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'babel-polyfill',
    path.join(__dirname, '../../app/web/index'),
  ],
  output: {
    path: path.join(__dirname, '../public'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    loaders: [
      {
        test: /\.less$/,
        loader: 'style!css?sourceMap!less?sourceMap',
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react'],
          plugins: [['react-transform', {
            transforms: [{
              transform: 'react-transform-hmr',
              imports: ['react'],
              // this is important for Webpack HMR:
              locals: ['module']
            }],
          }]],
        },
      }, {
        test: /\.json$/,
        loader: 'json',
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        PLATFORM_ENV: JSON.stringify('web'),
      },
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    // new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],
};
  • Вопрос задан
  • 460 просмотров
Решения вопроса 1
fnnzzz
@fnnzzz
front-end dev
react-transform-hmr нынче диприкейтед.

попробуй поставить 3ю бету react-hot-loader.
npm i react-hot-loader@3.0.0-beta.6 --save-dev

удали "react-transform-hmr" из конфига, добавь "plugins": ["react-hot-loader/babel"].
и в entry - добавь 'react-hot-loader/patch',

в общем вот дока - тут поподробнее, по-идее должно завестись.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы