标签: webpack-dev-server

我正在尝试使用webpack开始使用React,但在尝试设置webpack-dev-server时仍然遇到错误.我跑了

npm install webpack-dev-server

其次是

webpack-dev-server

并且命令行返回以下内容:

events.js:154
      throw er; // Unhandled 'error' event
      ^

Error: getaddrinfo ENOTFOUND localhost
    at errnoException (dns.js:26:10)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:77:26)

关于这里发生的事情的任何线索？

我真的不知道webpack如何尝试搜索问题的根源,但我也在使用PHP在端口80上使用MAMP开发一个网站,我不知道这是否可能是问题的一部分？

我正在尝试使用我的Mac中的VirtualBox测试我的Internet Explorer 11的网站兼容性.我使用Webpack-Dev-Server运行本地服务器.

当我通过http://10.0.2.2:8080访问网页时,网站加载正常; 但是检查员小组不断反复抛出此错误:

SCRIPT7002: XMLHttpRequest: Network Error 0x2efd, Could not complete the operation due to error 00002efd. 

[WDS] Disconnected!

任何线索如何解决此错误？谢谢!

我正在建立一个反应应用程序.我用yeoman来生成react app结构.我使用webpack捆绑所有js文件.我package.json是 -

{
  "dependencies": {
    "axios": "^0.15.0",
    "classnames": "^2.2.5",
    "es6-shim": "^0.35.0",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-mdl": "^1.7.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.0",
    "redux": "^3.5.1",
    "todomvc-app-css": "^2.0.4"
  },
  "devDependencies": {
    "autoprefixer": "^6.2.2",
    "babel-core": "^6.13.0",
    "babel-eslint": "^6.0.2",
    "babel-loader": "^6.2.0",
    "babel-plugin-istanbul": "^2.0.1",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.2.0",
    "babel-preset-react": "^6.1.18",
    "browser-sync": "^2.9.11",
    "browser-sync-spa": "^1.0.3",
    "css-loader": "^0.23.1",
    "del": "^2.0.2",
    "es6-shim": "^0.35.0",
    "eslint": "^3.2.2",
    "eslint-config-xo-react": "^0.7.0",
    "eslint-config-xo-space": "^0.12.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-babel": "^3.1.0",
    "eslint-plugin-react": "^5.0.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-filter": "^4.0.0",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-sass": …

我可以看到,有代理webpack.dev.config.如何设置代理webpack.prod.config？我想调用另一个api域名网址而不是自己的域名网址.

我有以下 webpack 配置：

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    // publicPath: __dirname + '/dist/',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "/dist",
    hot: true,
  } 
}

我的理解是contentBase告诉 webpack 开发服务器从哪里提供文件。因此，如果我转到localhost:8080/test.txt，在此配置下，文件 atmyProjectRoot/dist/test/txt将由服务器发送到浏览器。那是对的吗？这一切有什么output.publicPath关系呢？

现在我已经index.html坐在bundle.js那里了myProjectRoot/dist/。（尽管我认为bundle.js这有点令人困惑，因为它实际上是由 webpack-dev-server 返回的内存包，但尽管如此）。根据我之前的段落，我希望服务器返回index.html到浏览器。由于contentBaseis/dist和index.html在磁盘上的路径是./dist/index.html.

但我却看到：Cannot GET /

所以，如果我再次访问，http://localhost:8080/bundle.js我会看到完整的 javascript 包（与我的文本编辑器中最后保存的内容是最新的）。但后来/index.html赢了Cannot GET /？

我缺少什么？

所以我已经使用create-react-app. 默认情况下，它npm用于构建、本地运行等...

我想要做的是转向使用 Webpack，但不破坏现有设置并进行了一些谷歌搜索，但没有任何开始和逐步进行，以便我可以更好地了解它正在做什么以及它要去哪里。也希望将 usingwebpack-dev-server与此结合使用。

也就是说，我希望你们有一些建议，也许还可以指出一些很好的教程来推动这一进程？

非常感谢。

我使用Angular,我只在Firefox" [WDS] Disconnected! " 上获得控制台错误.

这是我的Angular-Cli版本.

Angular CLI: 6.0.1
Node: 8.11.1
OS: win32 x64
Angular: 6.0.1
... cli, common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.1
@angular-devkit/build-angular     0.6.1
@angular-devkit/build-optimizer   0.6.1
@angular-devkit/core              0.6.1
@angular-devkit/schematics        0.6.1
@angular/animations               6.0.4
@ngtools/webpack                  6.0.1
@schematics/angular               0.6.1
@schematics/update                0.6.1
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.6.0

一旦 webpack-dev-server 启动，控制台将输出：

\xe2\x84\xb9 \xef\xbd\xa2wds\xef\xbd\xa3: Project is running at https://127.0.0.1:3002/\n\xe2\x84\xb9 \xef\xbd\xa2wds\xef\xbd\xa3: webpack output is served from /\n\xe2\x84\xb9 \xef\xbd\xa2wds\xef\xbd\xa3: Content not from webpack is served from ...\n

但是，我不愿意向用户显示上述日志，如何隐藏它们？

sudo npm run serve

> frontend@1.0.0 serve /home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda
> vue-cli-service serve

 INFO  Starting development server...
12% building 20/21 modules 1 active ...rojetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/buildin/global.js/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
    at ProvidedDependency.set (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226:9)
    at iterationDependencies (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/Compilation.js:940:21)
    at factory.create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/Compilation.js:950:8)
    at factory (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:409:6)
    at hooks.afterResolve.callAsync (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:155:13)
    at _fn0 (eval at create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:158:9)
    at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
    at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
    at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:83:5)
    at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
    at CaseSensitivePathsPlugin.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:51:5)
    at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:89:8) …

npx webpack-dev-server --mode development我正在我的应用程序中运行该命令react并收到上述错误。

[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 'hotOnly'. These properties are valid:

下面是我的webpack.config.js文件。

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      }, …