标签: webpack-dev-server

webpack-dev-server error cannot find module 'webpack-cli/bin/config/config-yargs在 yarn 工作区中安装 webpack、webpack-cli 和 webpack-dev-server 时出现错误“ '”。在 repo 中安装它们时没有这个问题。

我检查了根节点和子节点中的 node_modules。看来这个 config/config-yargs 文件安装在CHILD的 node_module 中，但没有安装在ROOT 中。

我必须手动将它从子级复制到根目录才能使其正常工作。

有没有办法正确安装它？

我的根 package.json ：

{
    "private": true,
    "workspaces": [
        "packages/server",
        "packages/front", <-- webpack has been installed her
    ],
    "name": "test",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

子 package.json 的一部分

{
"devDependencies": {
        "@babel/core": "^7.8.4",
        "@babel/preset-env": "^7.8.4",
        "@babel/preset-react": "^7.8.3",
        "@babel/preset-typescript": "^7.8.3",
        "typescript": "^3.7.5",
        "webpack": "^4.41.6",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
}

webpack.config.js

const …

我正在使用webpack-dev-server在 Docker 容器内运行 Nestjs 应用程序。一切都已启动并正在运行，但我无法从我的 VS Code 实例调试应用程序。我正在尝试使用以下配置公开 9229 端口webpack.config.js：

devServer: {
  host: '0.0.0.0',
  port: 9229,
},

当我netstat -l在容器内运行时，我可以看到该节点没有侦听 9229 端口：

我在 Dockerfile 和 docker-compose 文件中公开了端口 9229。Dockerfile：

FROM node:12.16.1-alpine
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . .
EXPOSE 3000
EXPOSE 9229
CMD [ "yarn", "run", "start:debug"]

以及 docker-compose.yml 文件：

version: '3.7'
services:
    open-tuna-api:
        image: opentunaapi
        ports:
            - 3000:3000
            - 9229:9229
        volumes: 
            - ./dist:/usr/src/app/dist
            - ./:/usr/src/app
        networks:
            - open-tuna-network
        expose: 
            - 9229 …

webpack-dev-server 可以设置为将您发送回 index.html 并查找单个路由（例如http://localhost:4301/sdr）的脚本，但是当您放入更深的路由（或带有/ 最后）http://localhost:4301/sdr/dog它会感到困惑。

  devServer: {
    contentBase: './dist',
    historyApiFallback: true
  },

使用http://localhost:4301/sdr/dog服务器响应

x GET http://localhost:4301/sdr/bundle.js 

将 /sdr 添加到搜索 bundle.js 的路径中

我怎样才能解决这个问题。...然后我将在 NGINX 上尝试，然后使用react-router，然后使用navigo，然后使用react-router-redux....

webpack-dev-server重新加载 Web 应用程序大约需要一分钟。bundle.js是 4mb 左右 - 我知道这很大，但它是从本地服务器加载的，不应该花那么长时间吗？也不是重新编译的时候。这只是重新加载。因此，即使没有任何更改并且我只是在浏览器中触发刷新，一分钟也是加载包所需的时间。

这可能是什么原因？或者这只是它通常的运作方式？如何解决这样的问题webpack-dev-server？我想找到瓶颈。

我目前正在开发一个使用 Vue.js 作为前端的 Django 项目。我不断收到“[WDS] 断开连接！” 每次刷新页面都会出错。也就是说，该网站功能齐全并且没有问题，但是每次我重新加载页面时都会弹出错误。

[WDS] Disconnected!
close                webpack:///(webpack)-dev-server/client?:172
initSocket           webpack:///(webpack)-dev-server/client/socket.js?:26
dispatchEvent        webpack:///./node_modules/sockjs-client/dist/sockjs.js?:219
_close               webpack:///./node_modules/sockjs-client/dist/sockjs.js?:1097

我在 localhost:8000 上运行网站，在端口 8080 上运行前端作为本地网格实例，并设置了证书文件。

这是正常行为吗？我尝试像某些人建议的那样更新 npm，但这没有任何作用。

任何帮助，将不胜感激 ：）

我被困住了。我需要一些帮助。

我的环境：WSL2

我执行 webpack-dev-server

npm run dev

这是它的日志：

> lecture@1.0.0 dev /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture
> webpack-dev-server --hot

? ?wds?: Project is running at http://localhost:8080/
? ?wds?: webpack output is served from /dist/
? ?wds?: Content not from webpack is served from /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture
@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "85",
  "ie": "11",
  "samsung": "12"
}

Using modules transform: auto

Using plugins:
  proposal-numeric-separator { "ie":"11" }
  proposal-logical-assignment-operators { "ie":"11", "samsung":"12" }
  proposal-nullish-coalescing-operator { "ie":"11", "samsung":"12" }
  proposal-optional-chaining { "ie":"11", "samsung":"12" } …

我有一个遗留的 React 应用程序，应该从 16 更新到 17，webpack 从 v3 更新到 v5 和 babel。我遵循了官方 webpack 迁移指南来了解已弃用的插件和配置。但是我无法在本地服务器上运行该应用程序。

结果是“Cannot GET /”，对于 (0.0.0.0) 的网络为 404。在控制台日志上；

未选中的runtime.lastError：消息端口在收到响应之前关闭。http://0.0.0.0:8888/

加载资源失败：服务器响应状态为 404（未找到） http://0.0.0.0:8888/

在阅读了数十篇指南和 stackoverflow 后，尝试将 publicPath 设置为“/”，这导致空白页，但 0.0.0.0 为 200 。在控制台日志上；

（索引）：12 未捕获的引用错误：lamano 未在（索引）：12 和（索引）：17 处定义

未选中的runtime.lastError：消息端口在收到响应之前关闭。http://0.0.0.0:8888/

这个react应用程序是php应用程序的一部分，只负责其中的一小部分。

这是文件（仅我认为必要的部分）；

webpack.common.js

const path = require('path')
process.traceDeprecation = true
module.exports = {
    entry: {
        app: [
            './src/index.js',
        ],
        // copy lamono mock (pretty much only for testing, though)
        lamono: './test/mocks/lamono.js',
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'vendor/assets/dist', …

我正在尝试设置 webpack 开发服务器，但由于某种原因，我遇到了错误。

[webpack-cli] 选项对象无效。开发服务器已使用与 API 架构不匹配的选项对象进行初始化。options 有一个未知属性“contentBase”。这些属性有效： object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, HistoryApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware ？，onBeforeSetupMiddleware？，onListening？，打开？，端口？，代理？，服务器？，setupExitSignals？，静态？，watchFiles？，webSocketServer？}

我确实在全球安装了所有需要的软件包，并尝试了一些其他建议，但我无法让它工作。

这是配置：

const path = require('path');

module.exports = {
    entry: './app/Main.js',
    output: {
        publicPath: '/',
        path: path.resolve(__dirname, 'app'),
        filename: 'bundled.js',
    },
    mode: 'development',
    devtool: 'source-map',
    devServer: {
        port: 3000,
        contentBase: path.join(__dirname, 'app'),
        hot: true,
        historyApiFallback: { index: 'index.html' },
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: …

我正在学习 Udemy 课程，并尝试让 HMR 使用 webpack 版本 5.67.0 和 webpack-dev-server 4.7.3 运行，但它不起作用。当我修改并保存 CSS 文件时，webpack 正确地重新编译了项目，前端也正确更新，但热模块替换不起作用。它会重新加载整个页面。在我尝试实现该属性之前，HMR工作得很好before。

我已经在兔子洞里呆了两天了，遵循不同的建议，但仍然不起作用。

这是我的webpack.config.js：

const path = require('path')

const postCSSPlugins = [
    require('postcss-import'),
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('autoprefixer')
]

module.exports = {
    entry: './app/assets/scripts/App.js',
    output: {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'app')
    },
    devServer: {
        watchFiles: ('./app/**/*.html'),
        static: path.join(__dirname, 'app'),
        hot: true,
        port: 3000,
        // liveReload: false
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader','css-loader', {loader: "postcss-loader", options: {postcssOptions: …

在Webpack 4中，我曾经设置开发服务器的外网URL如下：

module.exports = {
  //...
  devServer: {
    public: 'myapp.test:80'
  }
};

然而，在 Webpack 5 文档中，我找不到这个选项。我该如何配置这个？