Проблема с горячей перезагрузкой;очищается при удалении node_modules и кеша - PullRequest
0 голосов
/ 23 января 2019

первый вопрос здесь.Горячая перезагрузка работала нормально, затем переустановка ОС и теперь не работает.В настоящее время есть некрасивое исправление.

Мой друг создал реактивный проект, который я изучал.Мне пришлось переустановить мою ОС недавно.До этого горячая перезагрузка работала нормально.

С моей текущей машиной я могу нормально запустить npm в течение 1 сеанса.после выключения и запуска горячая перезагрузка не работает.Затем я: 1. Удалю node_modules 2. Очистить кэш npm --force 3. Установить npm, как указано в этом ответе https://github.com/webpack/webpack-dev-server/issues/1003#issuecomment-328706990

Я предполагаю, что это мой компьютер - не уверен, где искать.Любая помощь будет отличной.Легко делать это каждый раз.Спасибо

Я использую Xubuntu, VScode, Firefox.

Содержимое webpack.config.js.Не уверен, поможет ли это

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

function createWebpackConfig() {
  const prod = process.env.NODE_ENV === 'production' || false;
  const dev = !prod;
  const buildDir = path.join(__dirname, 'build');
  const projDir = path.join(__dirname, 'src');
  const commonDir = path.join(projDir, 'common');

  const devPlugins = [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ];

  const prodPlugins = [
    new MiniCssExtractPlugin({
      filename: 'main-[contenthash].css',
      allChunks: true
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  ];

  return {
    entry: {
      app: path.join(projDir, 'index.js')
    },

    output: {
      path: buildDir,
      sourceMapFilename: '[name].map',
      filename: `[name]-[${dev ? 'hash' : 'chunkhash'}].js`
    },

    resolve: {
      modules: ['src', 'node_modules'],
      extensions: ['.js', '.jsx', '.css', '.scss'],
      alias: {
        actions: path.join(commonDir, 'actions'),
        reducers: path.join(commonDir, 'reducers'),
        assets: path.join(commonDir, 'assets'),
        components: path.join(commonDir, 'components'),
        styles: path.join(commonDir, 'styles'),
        commonStyles: path.join(commonDir, 'styles', 'common.scss'),
        utils: path.join(commonDir, 'utils')
      }
    },

    cache: dev,

    devtool: dev ? 'cheap-module-source-map' : false,

    stats: {
      colors: true,
      reasons: true,
      hash: Boolean(prod),
      version: Boolean(prod),
      timings: true,
      chunks: Boolean(prod),
      chunkModules: Boolean(prod),
      cached: Boolean(prod),
      cachedAssets: Boolean(prod)
    },

    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(projDir, 'index.template.html'),
        title: 'IMDB Clone',
        favicon: path.join(commonDir, 'assets', 'favicon.ico'),
        inject: false,
        minify: {
          removeComments: Boolean(prod),
          collapseWhitespace: Boolean(prod),
          removeRedundantAttributes: Boolean(prod),
          useShortDoctype: Boolean(prod),
          removeEmptyAttributes: Boolean(prod),
          removeStyleLinkTypeAttributes: Boolean(prod),
          keepClosingSlash: Boolean(prod),
          minifyJS: Boolean(prod),
          minifyCSS: Boolean(prod),
          minifyURLs: Boolean(prod)
        },
        baseUrl: dev ? '' : "location.protocol + '//' + location.host"
      }),
      new webpack.ProvidePlugin({
        React: 'react',
        PropTypes: 'prop-types',
        classNames: 'classnames'
      })
    ].concat(dev ? devPlugins : prodPlugins),

    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: dev
            }
          }
        },
        {
          test: /\.css$/,
          include: /node_modules/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.s?css$/,
          exclude: /node_modules/,
          use: dev
            ? [
                'style-loader',
                {
                  loader: 'css-loader',
                  options: {
                    minimize: Boolean(prod),
                    localIdentName: dev ? '[path][name]__[local]' : '',
                    modules: true,
                    url: false,
                    sourceMap: true,
                    importLoader: 2
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: true
                  }
                }
              ]
            : MiniCssExtractPlugin.extract({
                fallback: 'style-loader',
                use: [
                  {
                    loader: 'css-loader',
                    options: {
                      minimize: Boolean(prod),
                      modules: true
                    }
                  },
                  'sass-loader'
                ]
              })
        },
        {
          test: /\.html$/,
          exclude: [/node_modules/, path.join(__dirname, 'src', 'index.template.html')],
          use: [
            {
              loader: 'html-loader',
              options: {
                minimize: true
              }
            }
          ]
        },
        {
          test: /\.(jpg|png|eot|svg|ttf|woff|woff2)?(\?[a-z0-9#=&.]+)?$/,
          use: 'file-loader'
        }
      ]
    },

    devServer: {
      historyApiFallback: true
    }
  };
}

module.exports = createWebpackConfig();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...