标签: webpack-dev-server

我有一个 Webpack 4 项目，当使用 webpack-dev-server 时，构建完成后我收到了大量日志记录，但我确实不需要。

i \xef\xbd\xa2wdm\xef\xbd\xa3: Compiling...\n\xe2\x80\xbc \xef\xbd\xa2wdm\xef\xbd\xa3: Built at: 2018-4-15 09:15:18\nEntrypoint main = styles.css bundle.js\n[./node_modules/ansi-html/index.js] 4.16 KiB {main}\n[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main}\n[./node_modules/react-dom/index.js] 1.33 KiB {main}\n[./node_modules/react/index.js] 190 bytes {main}\n[./node_modules/url/url.js] 22.8 KiB {main}\n[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main}\n[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js\n3.58 KiB {main}\n[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main}\n[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main}\n[./node_modules/webpack/hot sync ^\\.\\/log$] (webpack)/hot sync nonrecursive ^\\.\\/log$ 170 bytes {main}\n[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main}\n[./source/scripts/components/app.js] 2.11 KiB {main} [1 warning]\n[./source/scripts/index.js] 454 bytes {main}\n[./source/styles/main.scss] 39 bytes {main} [built]\n   [0] multi (webpack)-dev-server/client?http://localhost:8080 ./source/scripts/index.js 40 bytes …

我一直在与这个斗争，但一切都是徒劳的。我正在接管这个 Webpack 项目，该项目需要从其目录级别运行 robots.txt 文件，但我无法使其路由正常工作。我将其放在提供 index.html 的位置旁边，但当我尝试加载或访问它时，我不断收到错误“无法获取 robots.txt”。

是否有任何文档或示例显示如何从 Webpack 项目提供 robots.txt？

谢谢，

考虑以下webpack.config.js。运行时npx webpack我的调用console.log('Here goes my custom function')被执行。然而运行npx webpack-dev-server它并没有，尽管我可以看到它进行了编译。

这是为什么？我该如何解决这个问题？

module.exports = {
      // ... 
    module: {
      // ...
    plugins: [  
        {
            apply: (compiler) =>{
                compiler.hooks.beforeRun.tap('BeforeRunPlugin', (compilation) => {
                    console.log('Here goes my custom function')
                })
            }
        },
        // ... 
    ],
    devServer: {  
        contentBase: join(__dirname, 'dist'),
        publicPath: './assets/',
        port: 7700,
        open: false,
        overlay: true, // show compiler errors as overlay
        writeToDisk: true,
    }
};

我onClick在一个非常简单的 React 函数组件中创建了一个处理程序：

export default function MyButton() {
   return (
      <button
         onClick={() => {
            console.log('test');
         }}
      >
         Button
      </button>
   );
}

现在奇怪的部分是：无论我使用什么浏览器，该事件都不会触发。我已经创建了这样一个组件数百次，直到现在一切都很好。

对于其他人来说，这段代码可以正常工作。

我无法共享整个项目或示例存储库。它实际上只是一个随处可见的简单 React 应用程序。

它无法在我的系统上运行的原因可能是什么？

编辑：

错误在某种程度上是在纱线内部的。我呼吁webpack-dev-server -d source-map --mode=development开发并且我正在使用"webpack-dev-server": "^4.0.0-beta.0". 我认为缓存可能已以某种方式损坏。

npm为了解决这个问题，我删除了输出目录并使用而不是启动脚本yarn。这样，即使我yarn再次使用，它仍然有效。

我真的不知道为什么会发生这种事。很高兴知道原因。

我正在使用 webpack 和 typescript 构建一个 React 应用程序。我正在使用依赖项react-financial-charts，并且它在 中正确指定package.json，并且内部有以下两个文件夹node_modules：@react_financial_charts和react_financial_charts。

但是，当我在代码中使用该库并编译时，出现以下错误。

ERROR in ./node_modules/@react-financial-charts/utils/lib/index.js 2:0-27
Module not found: Error: Can't resolve './withSize' in 'C:\Users\Username\project\node_modules\@react-financial-charts\utils\lib'
Did you mean 'withSize.js'?

我检查了此错误消息中描述的文件夹，它包含文件withSize.js. 是什么赋予了？

我的webpack.config.js包含这个：

  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },

我的index.tsx包含：

import React from "react";
import ReactDOM from "react-dom";
import Chart from "./StockChart"

ReactDOM.render(<Chart />, document.getElementById("root"));

位于StockChart.tsx同一目录中并从以下位置复制粘贴： https: //github.com/reactivemarkets/react-financial-charts/blob/master/packages/stories/src/features/StockChart.tsx

我按照这些说明设置了 React+Webpack+Typescript 项目（请注意，我后来react-financial-charts按照这些说明添加了依赖项）：

https://www.newline.co/@bespoyasov/how-to-create-a-react-typescript-application-from-scratch--676bd120

我有一个A依赖于 package 的包B。我用来在本地yalc更新B和发布更改，以便A可以获取这些更改。

我可以看到更改已复制到 的文件夹中A，node_modules但是 webpack 似乎没有拾取它们。A在开发服务器中运行时，我仍然看到旧代码。重新启动开发服务器没有帮助。甚至yarn install --check-files没有帮助。唯一有帮助的就是用核武器摧毁整个系统node_modules并重新安装。

项目A是用以下命令创建的create-react-app

package.json有以下内容：

dependencies: {
...
@company_name/project_name: "file:.yalc@company_name/project_name"
... }

我在用yarn 1.22

我想启动一个 redux 项目，下面提供了 package.json：

{
  "name": "redux-starter",
  "version": "1.0.0",
  "description": "Redux Starter Project",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js",
    "test": "jest --watch"
  },
  "keywords": [],
  "author": "Mosh Hamedani",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@types/jest": "^25.1.3",
    "axios-mock-adapter": "^1.17.0",
    "babel-jest": "^25.1.0",
    "jest": "^25.1.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.2.5",
    "axios": "^0.19.2",
    "immer": "^5.3.6",
    "immutable": "^4.0.0-rc.12",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "reselect": "^4.0.0"
  }
}

在webpack.config.js这里： …

我正在尝试反应模块联合。我使用 create-react-app 命令创建了两个 React 应用程序（modulefederation1、modulefederation2）。当我运行应用程序时，出现“未捕获错误：共享模块不可用于急切消费：webpack/sharing/consume/default/react/react”错误。

节点版本： v16.14.2

下面是我的代码。

模块联盟1：

包.json：

{
  "name": "modulefederation1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "html-webpack-plugin": "^5.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "serve": "^13.0.2",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "web-vitals": "^2.1.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack --config webpack.prod.js",
    "serve": "serve dist -p 3002",
    "clean": "rm -rf dist"
},
  "eslintConfig": {
    "extends": [ …

我尝试在将 webpack4 升级到 webpack5 后运行该应用程序，我还将节点版本升级到 18。这是我得到的...

[webpack-cli] Error: Unknown option '--env.development'
[webpack-cli] Run 'webpack --help' to see available commands and options

这是我的 package.json 文件

"scripts": {
    "start": "webpack-dev-server --env.development",
    "watch": "webpack --watch",
    "build-production": "webpack --env.production --env.NODE_ENV=production ",
    "build-staging": "webpack --env.production --env.NODE_ENV=staging ",
    "build-development": "webpack --env.production --env.NODE_ENV=development ",
    "test": "jest --maxWorkers=4 --logHeapUsage",
    "lint:report": "eslint -f checkstyle -o ./eslint_report/report.xml --ext .js,.vue .",
    "lint:fix": "eslint --ext .js,.vue --fix .",
    "lint": "eslint . --ext .js,.vue",
    "format": "prettier -w .",
    "prepare": "husky install"
  },
 "webpack": …

目前我正在努力让HMR在我的Webpack 2设置中工作.我将解释我的整个设置,所以我希望这足以让某人了解正在发生的事情.

我项目的结构:

config
  dev.js
  prod.js 
dist
  css
  js
  index.html
node_modules
src
  components
    // some JavaScript components
  shared
  stylesheets
  index.js
.babelrc
package.json
webpack.config.js

这是我的webpack.config.js文件的内容,放在我的项目的根目录中:

function buildConfig(env) {
  return require('./config/' + env + '.js')(env)
}

module.exports = buildConfig;

所以在这个文件中我可以选择将不同的环境传递给buildConfig函数.我使用此选项来使用不同的配置文件进行开发和生产.这是我package.json文件中的内容:

{
  "main": "index.js",
  "scripts": {
    "build:dev": "node_modules/.bin/webpack-dev-server --env=dev",
    "build:prod": "node_modules/.bin/webpack -p --env=prod"
  },
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-cli": "^6.18.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.2.5",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "json-loader": "^0.5.4", …