一旦出现错误，webpack-dev-server 将停止工作，并且即使错误已修复，浏览器也不会再次自动更新

Question

我正在使用 Webpack 5 构建静态 HTML 样板。一切正常，Webpack 编译成功，每当我更改源代码中的 HTML、SCSS/CSS 或 JS 文件时，浏览器都会更新。

如果代码有错误就会出现问题，WDS会停止工作，浏览器会在控制台显示错误信息，例如：

即使我修复了错误，Webpack 说编译成功，WDS 仍然无法工作，浏览器一直卡在错误处。我必须手动重新加载浏览器才能使其再次运行。

谁能帮帮我？错误修复后如何让浏览器重新更新？

我发现了同样的问题webpack-dev-server stops compiling after a syntax error, requires restart，但是没有正确的答案所以我不得不再问一个。

这是我的 webpack.common.js:

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

// Prepare plugins
const plugins = [
  new MiniCssExtractPlugin({
    filename: './style/main.css?v=[contenthash]',
  }),
  new HtmlWebpackPlugin({
    template: 'src/index.html',
    inject: 'body',
    filename: 'index.html',
    minify: {
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true,
    },
  }),
];
// Create more HtmlWebpackPlugin
const files = fs.readdirSync(path.resolve('.', 'src/pages'), 'utf8');
files.forEach((file) => {
  const page = new HtmlWebpackPlugin({
    template: `src/pages/${file}`,
    inject: 'body',
    filename: `pages/${file}`,
    minify: {
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true,
    },
  });
  plugins.push(page);
});

module.exports = {
  entry: './src/scripts/index.js',
  output: {
    path: path.resolve('.', 'build'),
    filename: './js/bundle.js?v=[contenthash]',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: [/node_modules/],
      },
      {
        test: /\.(s?css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-hot-loader',
          'css-loader',
          'sass-loader',
          'import-glob-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              postcssOptions: {
                plugins: () => [require('autoprefixer')],
              },
            },
          },
        ],
      },
      {
        test: /\.(gif|png|jpe?g|svg|woff|eot|ttf|woff2)$/,
        // use: 'url-loader',
        type: 'asset/resource',
      },
      {
        test: /\.html$/i,
        loader: 'html-loader', // export HTML as string. HTML is minimized when the compiler demands.
        options: {
          sources: false,
        },
      },
    ],
  },
  plugins,
};

这是我的 webpack.dev.js:

const path = require('path');
const { merge } = require('webpack-merge');
const WebpackNotifierPlugin = require('webpack-notifier');
const ESLintPlugin = require('eslint-webpack-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve('.', 'src'), // source of static assets
    port: 1802, // port to run dev-server
    hot: true, // hot reload
    watchContentBase: true,
    // open: true, // immediately open browser to show localhost:1802 when start script
  },
  plugins: [
    new ESLintPlugin({}),
    new StylelintPlugin({ fix: true }),
    new WebpackNotifierPlugin({ onlyOnError: true }),
  ],
});

这是我的package.json

{
  "name": "static-web-boilerplate",
  "version": "1.0.0",
  "description": "Simple boilerplate for developing static web projects",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env ENV=development webpack serve --config webpack/webpack.dev.js --progress",
    "start:prod": "npm run build && serve build",
    "build": "cross-env ENV=production webpack --config webpack/webpack.prod.js --progress --stats-error-details"
  },
  "author": "Hau Pham",
  "license": "ISC",
  "dependencies": {
    "@babel/runtime": "^7.14.6",
    "autoprefixer": "^10.2.6",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "copy-webpack-plugin": "^9.0.1",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "eslint-webpack-plugin": "^2.5.4",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^1.6.1",
    "serve": "^12.0.0",
    "stylelint-webpack-plugin": "^2.2.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack-merge": "^5.8.0",
    "webpack-notifier": "^1.13.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "cross-env": "^7.0.3",
    "css-hot-loader": "^1.4.4",
    "css-loader": "^5.2.6",
    "eslint": "^7.29.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-stylelint": "^13.1.1",
    "eslint-import-resolver-webpack": "^0.13.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.1.2",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-prettier": "^3.4.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "import-glob-loader": "^1.1.0",
    "node-sass": "^6.0.1",
    "postcss-loader": "^6.1.0",
    "prettier": "^2.3.2",
    "sass-loader": "^12.1.0",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-recommended": "^5.0.0",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-config-standard-scss": "^1.1.0",
    "stylelint-scss": "^3.19.0",
    "terser-webpack-plugin": "^5.1.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.41.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

Answer 1

经过几个小时的研究，我找到了解决方案。根据 webpack-dev-server github 页面上的 comment，将 webpack-dev-server 更新到版本 4 应该可以解决此问题。我试过了，确实解决了问题！

（在回答这个问题时，最新版本 4 是 4.0.0-beta.3）

一旦出现错误，webpack-dev-server 将停止工作，并且即使错误已修复，浏览器也不会再次自动更新

Once there is error, webpack-dev-server will stop working and browser is not auto updated again even after error is fixed

javascript

webpack

webpack-dev-server

webpack-5