javascript - Webpack devServer 在 Chrome 上加载不同的项目

Question

我有一个使用 Webpack 的前端项目，其中 devServer 让我对 Chrome 感到头疼：我所看到的只是我大约 2 个月前从事的一个项目。我在 Windows 10 上-不确定是否重要。

这是我完整的 webpack.dev.js 配置——应该不会太复杂。我删掉了样式加载器，因为它有很多行，但他们不应该关心这个问题。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    // here I use contentBase because I need to serve some static files (font-awesome mainly)
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080,
    host: 'localhost',
    hot: true,
    open: true,
    publicPath: 'http://localhost:8080/dist/'
  },
  entry: {
    app: './js/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          }
          //cut for simplicity
        ]
      },
      {
        test: /\.(png|svg|jpg|gif|ico)$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

这是 package.json

"scripts": {
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --config webpack.dev.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "@babel/core": "^7.0.0-beta.52",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.52",
    "@babel/preset-env": "^7.0.0-beta.52",
    "babel-loader": "^8.0.0-beta.4",
    "bootstrap": "^4.1.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "font-awesome": "^4.7.0",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "node-sass": "^4.9.2",
    "popper.js": "^1.14.3",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack-dev-server": "^3.1.4"
  },
  "devDependencies": {
    "jest": "^23.3.0",
    "eslint": "^5.0.1",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-standard": "^3.1.0",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "npm-run-all": "^4.1.3",
    "eslint-config-standard": "^11.0.0"
  },

所以，问题是：当我运行时npm start——它只是通过指定配置文件来调用 webpack——项目成功构建，并且 devServer 似乎可以正常工作。

如果我localhost:8080在 Firefox 上导航，一切正常，但如果我用 Chrome 导航到同一个位置，我唯一能看到的是create-react-app我在大约 2-3 个月前工作的 React 项目（从 弹出）。

如果我更改 devServer 的目标端口，一切都很好，它也可以在 Chrome 中正确加载，但是一旦我使用端口 8080，我就会看到旧的 React 项目。

主要问题是我真的没有办法在另一台机器上重现它。

我知道我可以使用不同的端口，但这并不是真正的解决方案，它更像是一个临时补丁:)

此配置中是否有任何内容表明可以加载一些旧代码，或者它没有被清除？这是 Chrome 的某种错误吗？

如果它有任何用处，Chrome 已经安装了 React 开发者工具——这可能是罪魁祸首吗？

PS：如果有人想知道，我确实使用任务管理器关闭了所有正在运行的节点实例，并且在过去几个月中我多次重新启动了我的机器:)

编辑：我可能已经太快说这个配置适用于 Firefox。这似乎是在拉入使用生产脚本构建的捆绑包......

EDIT2：添加了 package.json

标签： javascriptreactjsgoogle-chromewebpackwebpack-dev-server