标签: webpack-dev-server

我对 webpack 很陌生，所以请宽容，但我不明白为什么它在检测到修改时不重新加载页面。对于某些旧版本的 webpack，只需运行 webpack-dev-server 就足够了，但对于这些最新版本，我无法到达那里。

这是我的配置：

const path = require('path')
 
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public/scripts'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env']
                ]
              }
            }
          }
        ]
    },
    target: ['web', 'es5'],
    devServer: {
      contentBase: path.resolve(__dirname, 'public'),
      watchContentBase: true
    },
    devtool: 'source-map'
}

这是我的脚本：

"scripts": {"dev": "webpack serve --mode=development"}

我正在运行的版本：

"webpack": "^5.11.0",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.0"

感谢您的帮助

我正在尝试在带有Themekit 的自定义 Webpack 项目中以及运行时使用 TailwindCSS JIT 功能yarn startwebpack 开发服务器时 HMR 不断重新编译。

代码： https: //github.com/3daddict/themekit-webpack/pull/63

包.json

{\n"scripts": {\n...\n    "start": "TAILWIND_MODE=watch webpack serve --mode=development --config webpack.dev.js",\n...\n  }\n}\n

tailwind.config.js

module.exports = {\n  mode: \'jit\',\n  purge: {\n    enabled: true,\n    content: [\n      \'./dist/**/*.liquid\',\n      \'./dist/**/*.js\',\n    ],\n  },\n  ...\n}\n\n

src/组件/tailwind.css

/* purgecss start ignore */\n@tailwind base;\n@tailwind components;\n/* purgecss end ignore */\n@tailwind utilities;\n...\n

Webpack 开发服务器热模块重新加载不断地重新编译。我一直在试图找出原因。

\xe2\x84\xb9 \xef\xbd\xa2wdm\xef\xbd\xa3: webpack compiled successfully\n\xe2\x84\xb9 \xef\xbd\xa2wdm\xef\xbd\xa3: Compiled successfully.\n\xe2\x84\xb9 \xef\xbd\xa2wdm\xef\xbd\xa3: Compiling...\n\xe2\x84\xb9 \xef\xbd\xa2wdm\xef\xbd\xa3: …

我在尝试在 Single-SPA 应用程序中启动子应用程序时遇到错误。基本上，我正在尝试开发一种 util 应用程序（Single-SPA 中的子应用程序），其中包含 Sockjs、Stomp-client 等。我删除了节点模块和 package-lock.json 并再次安装了节点模块。当我尝试启动应用程序时，我遇到以下错误。

Error:
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'firewall'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
 - options.client has an unknown property 'host'. These properties are valid:
   object …

我在 webpack 5/Vuejs 3 应用程序中使用 webpack-dev-server 来利用在应用程序开发期间将代码更改保存在编辑器中后立即显示在浏览器中的功能（对该功能的详细解释我感兴趣，但我认为它在“热门”或“HMR”下交易）。

好处是这原则上是有效的。我可以在编辑器中更新 .vue 文件，保存它，查看 webpack-dev-server 重新编译，查看 JS 控制台日志，表明它检测到更改，并且更改（例如文本更改）显示在浏览器页面中。

但是，当在初始（硬）页面加载后导航到另一路由（URL）时，导致初始页面 URL 与当前 URL 不同，代码更改不会反映在浏览器页面中。所有其他步骤（例如编译、客户端上的更改检测、重新加载更改、日志）都会执行，但只是不更新​​浏览器页面。然而，当用户导航到其他地方并返回时，它会更新页面。

这个问题听起来很熟悉吗？我认为即使在单页应用程序中导航到另一个路由（URL）时，实时更新也应该正常工作（如果我的期望是错误的，请更正）。

我的相关部分webpack.conf.js（恕我直言，没什么特别的）：

  devServer: {
    historyApiFallback: {
      rewrites: [{
        from: /.*/,
        to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
      }]
    },
    hot: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    proxy: config.dev.proxyTable
  }

更新

有趣的是，<style>即使初始页面加载 URL 已更改，该部分的更新也会立即反映出来。

在成功构建的 webpack 包上运行“npx webpack 服务器”，发生错误时的输出并不能告诉我太多信息（错误：“错误标签”位于 webpack 开发服务器代码深处），您在哪里可以看到更多信息/详细信息？这是输出：

npx webpack 服务

(node:31820) [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning: 'https' option is deprecated. Please use the 'server' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
<i> [webpack-dev-server] SSL certificate: C:\Code\pl-security-audit-hub\PrecisionLender.SecurityAuditHub.API\ClientApp\node_modules\.cache\webpack-dev-server\server.pem
<w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.
<i> [webpack-dev-server] [HPM] Proxy created: **  -> https://localhost:5510
[webpack-cli] Error: wrong tag
    at Object.createSecureContext (_tls_common.js:271:19)
    at Server.setSecureContext (_tls_wrap.js:1331:27)
    at Server (_tls_wrap.js:1186:8)
    at new …

I\xe2\x80\x99m 使用react-app-rewired并且我想禁用每次编译时出现的 Typescript 警告覆盖。由于我不明白的原因，叠加层上出现了 VSCode Typescript 检查器未检测到的警告；webpack 是一个更严格的执行者（实际上比我想要的更严格）。

不管怎样，我尝试过react-app-rewired start --no-client-overlay，我为我的config-overrides.js文件尝试过这个：

module.exports = {\n    webpack: function (config, _) {\n        config.devServer = {\n            client: {\n                overlay: false\n            }\n        }\n        return config\n    }\n}\n

两者都没有任何效果。知道如何禁用覆盖会很好，但同样好的解决方案是如何让编译器使用与 VSCode 相同的严格级别。