@evlgromov

Как исправить проблему LiveReloada в Webpack?

Помогите решить проблему. При изменении js файлов при включенном webpack-dev-server в режиме hmr страница компилится как и должно быть, но в бразере отображается пустая страница. Приходится останавливать WDS и заново запускать скрипт npm start - в таком случае страница рендерится как надо. В чем может быть проблема?

webpack.config.js:
const CopyPlugin = require('copy-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

const jsLoaders = () => {
  const loaders = [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-proposal-class-properties']
      }
    }
  ]
  if (isDev) {
    loaders.push('eslint-loader')
  }
  return loaders
}

const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

const filename = ext => isDev ? `bundle.${ext}` : `bundle.[hash].${ext}`

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: ['@babel/polyfill', './index.js'],
  output: {
    filename: filename('js'),
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@core': path.resolve(__dirname, 'src/core')
    }
  },
  devtool: isDev ? 'source-map' : false,
  devServer: {
    port: 3000,
    hot: isDev
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: 'index.html',
      minify: {
        removeComments: isProd,
        collapseWhitespace: isProd
      }
    }),
    new CopyPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, 'src'),
            to: path.resolve(__dirname, 'dist')
          }
        ]
      }
    ),
    new MiniCSSExtractPlugin({
      filename: filename('css')
    })
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCSSExtractPlugin.loader,
            options: {
              hmr: isDev,
              reloadAll: true
            }
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: jsLoaders()
      }
    ]
  }
}


package.json:
{
  "name": "website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@babel/polyfill": "^7.10.4"
  },
  "browserslist": ">0.25%, not dead",
  "devDependencies": {
    "@babel/core": "^7.11.0",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.0.3",
    "cross-env": "^7.0.2",
    "css-loader": "^3.6.0",
    "eslint": "^7.6.0",
    "eslint-config-google": "^0.14.0",
    "eslint-loader": "^4.0.2",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "sass": "^1.26.9",
    "sass-loader": "^8.0.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --open",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },
  "license": "ISC"
}
  • Вопрос задан
  • 33 просмотра
Решения вопроса 1
@evlgromov Автор вопроса
Предыстория, если кому интересно. Так как проходил видеокурс, то для большего понимания на определенном этапе решил параллельно копипасту за автором слепить свой проект. В процессе оказалось, что при запуске скрипта npm start открывается браузер и в окне отображается результат отрендеренной страницы, пока все ок, но только я изменяю какой нибудь js файл, вебпак компилится, выдает статус 「wdm」: Compiled successfully., страница релоадится и становится абсолютно пустой. Весь код конфига и package.json с зависимостями одинаковый, много раз удалял node_modules и переустанавливал заново командой npm install, но тщетно. Проблема была решена, когда я методом перебора копирования и замены необходимых файлов из проекта курса в свой проект не пришел к итогу, что проблема в файле package-lock.json. Только я взял этот файл из курса и установил зависимости, как все заработало. Стоило возвратить старый файл package-lock.json, как все снова ломалось. Проблема решена, но я так и не понял в чем была проблема. Объясните, кто сталкивался или хотя бы может есть какие то мысли по данному поводу. Буду благодарен.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы