webpack и реагировать на ошибки - ошибка Uncaught: горячая замена модуля [HMR] отключена - PullRequest
Новая
       7

webpack и реагировать на ошибки - ошибка Uncaught: горячая замена модуля [HMR] отключена

0 голосов
/ 02 ноября 2019

Я пытаюсь реализовать горячую замену модуля в моем приложении

Мой файл webpack.config.dev 

const merge = require('webpack-merge');
const webpack = require('webpack');
const common = require('./webpack.common.js');

/**
 * This configuration should be used when running the application locally via npm run dev or npm run start
 */

module.exports = merge(common, {
  mode: 'development',
  entry: [
    'webpack/hot/only-dev-server'
  ],
  // watch: true,
  devtool: 'eval-source-map',
  devServer: {
    contentBase: './dist',
    hot: true,
    inline: true,
    // publicPath: './dist',
    port:9001,
    overlay: {
      warnings: true,
      errors: true
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
})

Файл webpack.common 

const webpack = require('webpack');
const path  = require('path');
const WorkerPlugin = require('worker-plugin')
const MiniCssExtractPlugin  = require('mini-css-extract-plugin');

const execSync = require('child_process').execSync;
const CURRENT_BRANCH_NAME = (process.env.BRANCH_NAME) ? process.env.BRANCH_NAME : execSync('git rev-parse --abbrev-ref HEAD').toString().trim();

module.exports = {
  devtool: 'eval-source-map',
  entry: ['@babel/polyfill', path.resolve(__dirname, 'ui/components/entry', 'main_window.js')],
  // query_worker: path.resolve(__dirname, 'communication/cache', 'query_worker.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[name].js'
  },
  resolve: {
    alias: {
      'actions': path.resolve(__dirname, 'ui/actions'),
       ....
      'react-dom': '@hot-loader/react-dom'
    },
    extensions: ['.js','.jsx', '.css']
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /(node_modules|public_libs)/,
        query: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-transform-runtime']

        }
      },
      {
        test: /\.(css|less)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: path.resolve(__dirname, 'dist')
            },
          },
          'css-loader',
          'less-loader'
        ],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      },
      {
        test: /\.md$/,
        loader: 'html-loader ! markdown-loader'
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin ({
      filename: 'styles.[name].css',
      chunkFilename: 'styles.[id].css',
    }),
    new webpack.ProvidePlugin ({
      ReactDOM: 'react-dom',
      React: 'react',
      Webix: 'webix',
    }),
    new webpack.DefinePlugin({
      BRANCH_NAME: JSON.stringify(CURRENT_BRANCH_NAME)
    }),
    function() {
      this.plugin('watch-run', function(watching, callback) {
        console.log('------------>Begin compile at ' + new Date() + '<------------');
        callback();
      })
    },
    new WorkerPlugin()
  ]
}

ИУ меня есть это в моем package.json 

"dev": "webpack-dev-server --config webpack.config.dev.js"

Когда я запускаю npm, запустите dev, я вижу ошибку Uncaught Error: [HMR] Горячая замена модуля отключена. в консоли иПользовательский интерфейс не появляется. Я попытался погуглить проблему и увидел 2 предложения: 1. Добавление HotModuleReplacementPlugin в файл webpack.config.dev 2. Добавление --hot --inline при выполнении webpack-dev-server

Я попробовал их оба, а такжедобавлено hot: true, inline: true для webpack.dev.config. Ни один из них не решил проблему. Я застрял с этим некоторое время и не могу двигаться вперед. Любая помощь приветствуется. Заранее спасибо. Ура!

...