浏览器不会在 npm start with webpack 上启动 与 webpack-dev-middleware@3.7.2 和 webpack@^4.0.0 相关的对等依赖问题？

问题描述

我是 JavaScript 的新手。为了学习 JavaScript，我从 GitHub (https://github.com/wbkd/webpack-starter) 克隆了 webpack-starter 项目。然后，我在桌面上的克隆文件夹中运行了 npm install，然后在 Git Bash 控制台中看到 npm audit fix 消息时运行了 found 1 low severity vulnerability。然后，我看到了这条消息，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$/,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% 自信地做出这一声明。

解决方法

所以，我环顾四周，发现了这个，https://stackoverflow.com/a/39753225/9698039，所以我在 webpack.config.dev.js 中将 open: true 添加到 devServer，结果是，>

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

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