Browser will not Launch on npm start with webpack 与 webpack-dev-middleware@3.7.2 和 webpack@^4.0.0 对等依赖问题有关？

Question

我是 JavaScript 的新手。为了学习 JavaScript，我从 GitHub (https://github.com/wbkd/webpack-starter) 克隆了 webpack-starter 项目。然后，我在桌面上的克隆文件夹中运行npm install，然后在 Git Bash 控制台中看到found 1 low severity vulnerability 消息时运行npm audit fix。然后，我看到了这条消息，npm WARN webpack-dev-middleware@3.7.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

在调查上述警告之前，我在 PowerShell 中从项目文件夹中运行了 npm start。我没有收到任何错误消息，但我的浏览器 (Chrome) 从未启动。

然后，我调查了npm WARN 消息并发现了这个https://stackoverflow.com/a/64733624/9698039，这导致了我https://github.com/webpack/webpack-dev-server/issues/2807#issuecomment-734982609，这导致我决定将我的webpack 版本从^5.10.0 降级为“webpack ": "^4.0.0"。

降级之前，这是我的 package.json：

{
    "name": "webpack-starter",
    "version": "1.0.0",
    "description": "A light foundation for your next frontend project based on webpack.",
    "scripts": {
        "lint": "npm run lint:styles; npm run lint:scripts",
        "lint:styles": "stylelint src",
        "lint:scripts": "eslint src",
        "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js",
        "start": "webpack serve --config webpack/webpack.config.dev.js"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/wbkd/webpack-starter.git"
    },
    "keywords": [
        "webpack",
        "startkit",
        "frontend",
        "es6",
        "javascript",
        "webdev"
    ],
    "author": "webkid.io",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/wbkd/webpack-starter/issues"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/plugin-proposal-class-properties": "^7.12.1",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/preset-env": "^7.12.7",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.2.2",
        "clean-webpack-plugin": "^3.0.0",
        "copy-webpack-plugin": "^6.4.0",
        "cross-env": "^7.0.3",
        "css-loader": "^5.0.1",
        "eslint": "^7.15.0",
        "eslint-loader": "^4.0.2",
        "file-loader": "^6.2.0",
        "html-loader": "^1.3.2",
        "html-webpack-plugin": "^4.5.0",
        "mini-css-extract-plugin": "^1.3.2",
        "node-sass": "^5.0.0",
        "postcss-loader": "^4.1.0",
        "sass-loader": "^10.1.0",
        "style-loader": "^2.0.0",
        "stylelint": "^13.8.0",
        "stylelint-config-standard": "^20.0.0",
        "stylelint-webpack-plugin": "^2.1.1",
        "webpack": "^5.10.0",
        "webpack-cli": "^4.2.0",
        "webpack-dev-server": "^3.11.0",
        "webpack-merge": "^5.4.0"
    },
    "dependencies": {
        "@babel/polyfill": "^7.12.1",
        "core-js": "^3.8.1"
    }
}

这是我的 webpack.config.dev.js：

const Path = require('path');
const Webpack = require('webpack');
const { merge } = require('webpack-merge');
const StylelintPlugin = require('stylelint-webpack-plugin');

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

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-cheap-source-map',
  output: {
    chunkFilename: 'js/[name].chunk.js',
  },
  devServer: {
    inline: true,
    hot: true,
  },
  plugins: [
    new Webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
    }),
    new StylelintPlugin({
      files: Path.join('src', '**/*.s?(a|c)ss'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        include: Path.resolve(__dirname, '../src'),
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          emitWarning: true,
        },
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.js$/,
        include: Path.resolve(__dirname, '../src'),
        loader: 'babel-loader',
      },
      {
        test: /\.s?css$/i,
        use: ['style-loader', 'css-loader?sourceMap=true', 'postcss-loader', 'sass-loader'],
      },
    ],
  },
});

为了降级 webpack，我将 package.json 中的 "webpack": "^5.10.0" 更改为 "webpack": "^4.0.0"，然后再次从 Git Bash 运行 npm install。

然后，我再次从 PowerShell 运行 npm start，再次没有看到错误消息，并且看到了 Compiled successfully 消息，但浏览器再次无法启动。似乎 webpack 对等依赖问题与浏览器无法启动问题无关，但我是 JavaScript 新手，因此目前无法 100% 有把握地提出该声明。

Answer 1

所以，我又看了看，发现了这个，https://stackoverflow.com/a/39753225/9698039，所以我在 webpack.config.dev.js 中将open: true 添加到了devServer，从而得到了这个，

devServer: {
    inline: true,
    hot: true,
    open: true
}

这很有效！我的浏览器启动了。我仍然不确定是否可以在不降级的情况下使用webpack，但似乎浏览器启动问题与对等依赖问题无关。