标签: webpack-dev-server

我使用 React 和 Webpack-Dev-Server 进行本地开发。

我时不时地收到此错误：“react_devtools_backend.js:6 [WDS] 编译时出错。重新加载被阻止。”

错误发生后，浏览器上不会更新任何代码更改。

包.json：

 "devDependencies": {
  "@babel/core": "^7.9.6",
  "@babel/plugin-transform-runtime": "^7.9.6",
  "@babel/preset-env": "^7.9.6",
  "@babel/preset-react": "^7.9.4",
  "@material-ui/core": "^4.10.0",
  "babel-loader": "^8.1.0",
  "css-loader": "^3.5.3",
  "file-loader": "^6.0.0",
  "lodash": "^4.17.15",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "style-loader": "^1.2.1",
  "webpack": "^4.43.0",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.11.0"}
"dependencies": {
  "@material-ui/styles": "^4.9.14",
  "clsx": "^1.1.0"}

webpack.config.js：

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: …

我可以在 webpack 中对 JS 和 SCSS 文件使用热模块替换，并且工作正常，但在尝试热重新加载 html 文件时遇到问题。对我有用的另一个选项是将“watchContentBase：true”属性添加到我的开发服务器属性中，但这会重新加载浏览器。我想要拥有它，这样当我保存文件时，浏览器会更新其内容，而无需完全重新加载页面。

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

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        port: 8080,
        contentBase: path.resolve(__dirname, './src'),
        hot: true,
        open: true,
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.html$/i,
                loader: …

在阅读webpack 文档后，我无法理解 hot:only 与 hot:true 之间的区别

要在构建失败时启用热模块替换而不刷新页面作为后备，请使用 hot: 'only'

如果我们使用 webpack-dev-server，监视模式会自动启用。那么什么情况下会发生构建失败呢？

我知道 HMR 在幕后如何工作（HMR 服务器、HMR 运行时），但不知道上面两者之间有什么区别。

有人可以解释一下吗？谢谢。

我正在使用 webpack 运行一个简单的 React/Django 应用程序，该应用程序在构建时收到此错误：

ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'getFormatter')
    at getFormatter (**[Relative path]**/frontend/node_modules/eslint-loader/dist/getOptions.js:52:20)
    at getOptions (**[Relative path]**/frontend/node_modules/eslint-loader/dist/getOptions.js:30:23)
    at Object.loader (**[Relative path]**/frontend/node_modules/eslint-loader/dist/index.js:17:43)

这是我的package.json

{
    "name": "frontend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start:dev": "webpack serve --config webpack.config.dev.js --port 3000",
        "clean:build": "rimraf ../static && mkdir ../static",
        "prebuild": "run-p clean:build",
        "build": "webpack --config webpack.config.prod.js",
        "postbuild": "rimraf ../static/index.html"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "axios": "^0.24.0", …

Webpack 开发服务器无法将 watchContentBase 识别为有效选项。已watchContentBase弃用吗？如果是这样，有什么替代方案？以下是我的 Webpack 开发服务器的配置：

devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8080,
    open: true,
    hot: true,
    watchContentBase: true,
}

当我运行我的服务器时，出现以下错误。

选项对象无效。开发服务器已使用与 API 架构不匹配的选项对象进行初始化。

• options 有一个未知属性“watchContentBase”。这些属性有效： object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, HistoryApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware ？，onBeforeSetupMiddleware？，onListening？，打开？，端口？，代理？，服务器？，setupExitSignals？，静态？，watchFiles？，webSocketServer？}

我配置并启动我的本地基于 webpackDevServer 的 React 项目，它在浏览器页面上显示良好，但是当我打开我的开发工具时，它只是不断地控制台出以下错误，显然，webpackDevServer 一次又一次地断开连接并重新连接。

WebSocketClient.js:13 WebSocket 连接到 \'ws://localhost:3003/ws\' 失败：\n[webpack-dev-server] Event\xc2\xa0{isTrusted: true, type: \'error\', target: WebSocket, currentTarget: WebSocket, eventPhase: 2,\xc2\xa0\xe2\x80\xa6}\n控制台错误信息图像

\n

我的本地配置信息如下。

\n

webpack.config.dev.js

const path = require(\'path\');\nconst paths = require(\'./paths.js\');\nconst HtmlWebpackPlugin = require(\'html-webpack-plugin\');\n\nmodule.exports = {\n  mode: \'development\',\n  entry: {\n    index: \'./src/index.js\',\n  },\n  devServer:{\n    port: 3003\n  },\n  output: {\n    filename: \'[name].bundle.js\',\n  },\n  devtool: \'inline-source-map\',\n  module: {\n    rules: [\n      {\n        test: /\\.m?js$/,\n        exclude: /(node_modules|bower_components)/,\n        use: {\n          loader: \'babel-loader\',\n          options: {\n            presets: [\'@babel/preset-env\']\n          }\n        }\n      }\n …

我正在开发的任何类型的语法错误或代码都会导致我的开发服务器停止。

我只是运行一个用这个设置的 npm start

GATSBY_ACTIVE_ENV=development gatsby develop

我收到有关任何语法错误的消息：

Failed to validate error [Error [ValidationError]: "location.start.index" is not allowed:
....
....
{ 
  message: '"location.start.index" is not allowed',
  path: [Array],
  type: 'object.unknown',
  context: [Object] 
}

failed Re-building development bundle - 0.714s

有什么明显的事情需要检查吗？我从 vscode 中运行。我希望开发服务器不会因任何语法错误而失败

我目前正在建立一个使用webpack-dev服务器和骨干路由器的站点.

直到今天,一切似乎都在起作用(例如我可以去http://localhost:3333我的主页和http://localhost:3333/login我的登录页面.

但今天我试图去我的第一个嵌套网址,http://localhost:3333/people/1我的控制台抛出404 GET错误.

确切的错误是这样的: http://localhost:3333/people/build/bundle.js 404 (Not Found)

似乎我的webpack服务器正在尝试在错误的目录下查找正确的服务器文件.如果这是正确的,我不知道如何解决这个问题.我已经看过其他堆栈溢出问题和github问题,但无济于事.有什么想法吗？

我使用gulp启动服务器.这是我的gulpfile:

var gulp = require("gulp");
var webpack = require("webpack");
var server = require("webpack-dev-server");
var config = require("./webpack.config");

gulp.task("serve", function() {
  new server(webpack(config), {
    publicPath: config.output.publicPath,
    historyApiFallback: true,
    hot: true,
    quiet: false,
    stats: { colors: true, progress: true },
  }).listen(3333, "localhost", function (err, result) {
    if (err) {
      console.log(err);
    } else {
      console.log("Listening at localhost:3333!");
    }
  });
});

gulp.task("default", ["serve"]);

这是我的webpack配置文件:

var webpack = require("webpack"); …

我正在使用https://github.com/erikras/react-redux-universal-hot-example,除了Webpack dev服务器之外,一切都很好.

出于某种原因,由于传输速度非常慢,6MB"main - ***.js"的初始负载可能需要2分钟.其他时间<5秒.

需要说明的是,这是在编译之后,CPU使用率为~0%,它只是将文件提供给缓慢的浏览器.我没有看到HMR的这种行为或从这台机器提供任何其他文件.

任何理论？我可以尝试任何可能的设置或调试选项吗？

我正在开发一个React应用程序并设置webpack将我的代码打包成捆绑包.

但是,当我使用React DevTools在Chrome中加载我的应用程序并尝试通过扩展修改组件的道具时,它不会更改值或使用新值重新渲染.

以下是我的 webpack.config.js

'use strict';

const webpack = require('webpack')

module.exports = {
  entry: {
    agile: './client/js/agile.jsx.js',
    vendor: [
      'domready',
      'react',
      'react-dom',
      'classnames'
    ]
  },
  output: {
    filename: '[name].bundle.js',
    path: 'public/js',
    publicPath: '/js/'
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
    ]
  },
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({names: ['vendor'], minChunks: Infinity}),
    new webpack.HotModuleReplacementPlugin()
  ],
  target: 'web',
  devtool: 'source-map',
  stats: {
    color: true,
    modules: false,
    reasons: false
  },
  devServer: {
    hot: true, …