标签: webpack-dev-server

我知道 webpack 5 使用 http-proxy-middleware 来代理 http 请求，但我正在尝试设置一个开发服务器并努力调试为什么我的代理不起作用，因为我看不到任何正在发生的事情的日志，是好是坏。

http-proxy-middleware 有一个 logLevel 属性，但这似乎不是从 webpack 配置传递下来的（或者我做错了）。

我确实在 webpack 中发现了一些名为“infrastructionLogging”的东西，但没有运气搞乱它，并且不确定它是否用于调试我的插件和加载器（在 webpack.config 中添加）或包含像 http-proxy-middleware 这样的内部依赖项。对于像我这样的新手来说，文档非常模糊。

当我运行启动 devServer 时，我确实从配置的代理收到一条消息，如下所示：

[webpack-dev-server] [HPM] 代理已创建：/api -> https://pokeapi.co/api/v2/"

但这是我唯一看到的。当我发出 api 请求时（无论它们是否有效），我在 devserver 控制台中再也看不到 HPM 的任何输出。有人可以帮忙吗？

网页包配置：

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

module.exports = {
    mode: 'development',
    entry: {
        ui: path.resolve(__dirname, 'src/app.js')
    },
    output: {
        path: path.resolve(__dirname, 'dist'),        
        filename: '[name].js',
        clean: true,
        assetModuleFilename: '[name][ext]'
    },
    devtool: 'source-map',
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist')            
        }, …

我正在使用 webpack 5，目前有以下设置：

• webpack.prod.js - 我有一些用于生产的特定配置（例如图像压缩、开发工具、CSS 缩小、特定元标记值）
• webpack.dev.js - 我有一些用于开发的特定配置（例如，无图像压缩、无 CSS 缩小、特定元标记值）

我当前面临的问题是我无法让webpack 开发服务器实时重新加载工作（这适用于所有文件类型）。我已经阅读了文档，但到目前为止还没有运气。

据我了解，在开发模式下，webpack 在内存中而不是在磁盘中运行内容（这应该更快，这很棒！）。由于某种原因，观察者似乎没有对devServer.watchFiles配置中指定的文件中的更改做出反应。我期待 webpack 检测打字稿文件的更改，编译它并重新加载，但这并没有发生。

您可以在下面找到这两个文件的内容。

webpack.prod.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const buildPath = path.resolve(__dirname, 'dist');

module.exports = {
  //devtool: 'source-map',
  entry: {
    index: "./src/index/index.ts",
    error: "./src/error/error.ts",
  },
  output: {
    filename: "js/[name].[contenthash].js",
    path: buildPath,
    clean: true,
  },
  module: { …

对于我的 Angular 项目（Angular 14、webpack-dev-server 4.9.3），如果应用程序在 Chrome 下运行，则 web-pack-server 会断开连接并尝试重新连接消息，并且不断循环。但如果在 Edge 下运行，则不会显示该消息。

该消息显示在控制台日志下。

我正在创建一个与webpack. 我正在sass项目中使用，所有scss文件都位于scss根目录中。我在名为 的目录中创建了一些部分内容partials。目录结构如下所示：

测验应用程序的目录结构

在文件的顶部quiz.module.scss，我有这个：

@use "colors" as *;\n@use "font";\n

我不想写@use "partials/colors"and @use "partials/font"，所以我决定将其包含在所使用的scss/partials列表中。我的某个地方有这个loadPathsscsswebpack.dev.js：

const PATHS_TO_SASS_PARTIALS = ["scss/partials"]\n

这在其他地方：

{\n  test: /\\.module\\.scss$/,\n  use: [\n    {\n      loader: "style-loader"\n    },\n    {\n      loader: "css-loader",\n      options: {\n        modules: {\n          mode: "local"\n        }\n      }\n    },\n    {\n      loader: "resolve-url-loader"\n    },\n    {\n      loader: "sass-loader",\n      options: {\n        sourceMap: true,\n        sassOptions: …

我切换到了一个项目来构建一致的单一存储库。

我有一个非常经典的结构，包含应用程序和包文件夹。

在 packages 文件夹中，我有一堆加载函数的小包和一些我在 app/frontend 和 app/backend 应用程序中使用的类型定义。

app/frontend 应用程序是一个 next.js 应用程序，最近迁移到 next.js 13。

mon repo 的工作方式非常出色，我对整洁的代码组织非常满意。

但是，当我运行旧的 npm run dev 来构建应用程序时，我注意到应用程序的反应性大大减慢，使开发成为一场噩梦（构建需要 40-60 秒，交互式 UI 更新需要 3-10 秒） ）。

是否存在我没​​有看到的基本错误？

这是一些背景：

应用程序/前端/next.config.js

const nextConfig ={
    ...
    transpilePackages: ["@my-repo/package-A", "@my-repo/package-B", "@my-repo/package-C"],
    reactStrictMode: true,
    swcMinify: true, 
    ... 
};

应用程序/前端/package.json

"dependencies": {
    "...": "...",
    "@my-repo/package-A": "workspace:*",
    "@my-repo/package-B": "workspace:*",
    "@my-repo/package-C": "workspace:*",
    "...": "..."
}

如果我从根文件夹中的 pnpm 启动脚本“pnpm --filter=@my-repo/frontend dev”或前端文件夹中的老式 npm run dev，则完全无关。

有什么线索吗？

非常感谢。

我预计开发服务器速度的下降会较小。

也许它可能是对自定义包的“workspace:*”引用，导致下一个开发服务器操作太多文件？我不知道。

Angular 15：错误发生意外错误：“无法找到要在 c:path\node_module 中链接的 webpack-dev-server 副本。我正在尝试使用纱线安装包依赖项，但出现上述错误。该项目前段时间安装和构建得很好，但是，最近它要求使用 webpack-dev-server，而我没有在其他 Angular 项目中明确配置它，想知道它的作用是什么以及为什么它现在问我。提前寻求帮助和意见。

包.json

{
  "name": "@website",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "lint:staged": "lint-staged",
    "lint:styles": "./node_modules/.bin/stylelint src/**/*.scss --fix",
    "e2e": "ng e2e",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
    "cypress:component": "cypress open --component",
    "format": "yarn prettier --write .",
    "prepare": "cd ../.. && husky install src/website-remote-iam/.husky"
  },
  "lint-staged": {
    "*.{js, ts}": [
      "eslint --quiet --fix"
    ],
    "*.{json, md, …

我使用egghead.io教程从React和Flux架构开始,但我遇到了一些与babel有关的麻烦.

我在尝试运行我的应用程序时收到错误webpack-dev-server.这是错误:

ERROR in The node API for `babel` has been moved to `babel-core`.
 @ (webpack)-dev-server/client?http://localhost:3002 1:10-24

ERROR in The node API for `babel` has been moved to `babel-core`.
 @ (webpack)-dev-server/client?http://localhost:3002 3:16-37

ERROR in The node API for `babel` has been moved to `babel-core`.
 @ (webpack)-dev-server/client?http://localhost:3002 2:13-37

ERROR in (webpack)/~/process/browser.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/usr/local/lib/node_modules/webpack/node_modules/process"
    at /var/www/public/flux/node_modules/babel-core/lib/transformation/file/options/option-manager.js:372:17
    at Array.map (native)
    at OptionManager.resolvePresets (/var/www/public/flux/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:20)
    at OptionManager.mergePresets (/var/www/public/flux/node_modules/babel-core/lib/transformation/file/options/option-manager.js:348:10)
    at OptionManager.mergeOptions (/var/www/public/flux/node_modules/babel-core/lib/transformation/file/options/option-manager.js:307:14) …

在nodemon上使用webpack-dev-server是否有（不利）优势。有人对此有真正的经验吗？我已经习惯了nodemone，我知道它也可以在生产中使用。而webpack-dev-server仅适合开发人员。

我已经在启用热重载的情况下为Reactjs开发克隆了这个仓库。它的工作正常，问题是，我想通过热重装在电子内部运行此应用程序。因此，在我的main.js文件中，我指向了reactsjs index.html文件。其显示空白页。虽然我可以在电子窗口上看到标签内容“ Welcome to react”，但这意味着其指向正确，但是没有内容显示出来。

我发现电子抛出错误

Failed to load resource: net::ERR_FILE_NOT_FOUND   app.js

我是刚开始响应开发的新手（仅从3-4天开始），所以不确定如何解决它。下面是我的目录结构和webpack配置

我的应用正在运行 http://localhost:8080/

目录结构

project
---node_modules
---src
------index.js
------Components  
*babelrc
index.html (used by react)
main.js (used by electron)
package.json
webpack.config.js

Webpack配置

const webpack = require('webpack')
const path = require('path')

module.exports = {
  devtool: 'source-map',
  entry: {
    'app': [
      'babel-polyfill',
      'react-hot-loader/patch',
      './src/index'
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
    ]
  }
}

由于小提示我不能得到像这样的路线

<Route path="/events/:id" component={EventDetailRoute} />

工作,因为我读过似乎是index.html中的bundle必须是绝对的,但是我使用的是HtmlWebpackPlugin,所以bundle被注入一个相对路径.

我试图为webpack设置输出配置如下:

output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
},

但这也不起作用.

如果我尝试这条路线:http:// localhost:8080/events/7,我在尝试查找http:// localhost:8080/events/index_bundle.js时收到404错误

这是我的webpack.config:

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

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
})

module.exports = {
    entry: './src/index.js',
    output: {
        path: "/" + path.resolve('dist', 'build'),
        filename: 'index_bundle.js',
        publicPath: '/'
    },
    devServer: {
        historyApiFallback: true,
        hot: true,
        publicPath: '/'
    },
    module: { …