标签: webpack-dev-server

我正在遵循redux 教程并使用 webpack 来捆绑 js 文件。

我的问题是，React 的控制台错误通过 webpack 包显示堆栈跟踪，而我希望它们通过实际的 js 代码显示堆栈跟踪。

例如，我在其中一个 js 文件中引入了拼写错误来演示。这是 Chromium 控制台中的错误： 当前错误消息的屏幕截图

我知道源映射，并且我已启用它们。它们允许我添加断点之类的东西，但它们似乎不允许从预捆绑的代码中打印错误消息。

这是package.json：

{
  "name": "feedmeapp",
  "version": "0.0.1",
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.6.5",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "eslint": "^2.13.1",
    "react": "^0.14.7",
    "react-hot-loader": "^1.3.0",
    "redux-devtools": "^3.1.1",
    "webpack": "^1.12.13",
    "webpack-bundle-tracker": "0.0.93",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "es6-promise": "^3.1.2",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.5.1",
    "radium": "^0.16.6",
    "react-cookie": "^0.4.5",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.0",
    "redux": "^3.3.1",
    "redux-thunk": "^1.0.3"
  }
} …

上下文：使用 webpack 4 尝试 RR4 (devServer: {apiHistoryFallback: true} Webpack 4 配置示例

http://localhost:8080/reports在剪切并粘贴到地址栏时有效（又名历史回退正在工作），我可以单击 /reports/8 的链接，因为我已在 /reports 处添加了到组件的嵌套路由

<Route path=${match.path}/:reportId component={ReportDetail}/>

但是将http://localhost:8080/reports/9剪切并粘贴到地址栏中，我得到一个空白屏幕和一个： Refused to execute script from 'http://localhost:8080/reports/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. 尝试为 devServer 设置 contentBase 但这并没有解决问题。

此功能在 Webpack 3 和 RR3 中运行良好。不确定是否要吠叫 Webpack 或 React Router 树。

与此类似的问题，但针对 Webpack 3

我目前正在努力重写 api 服务器的代理路径。在我的设置中，我所做的是 api 请求，我将它委托给代理服务器，并且仅使用 js/html/css webpack-dev-server。

以下是我正在使用的：

devServer: {
    inline: true,
    port: 8080,
    historyApiFallback: true,
    publicPath: 'http://localhost:8080/dist/',
    disableHostCheck: true,
    proxy: {
        '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'???' : ''} //Need to append http://localhost:3000/MySite1/api
  }
}

那么，如何在代理到 localhost:3000 之前将 /MySite1 附加到 api 请求？

例如，如果请求是： http://localhost:8080/api，它应该重新写入http://localhost:3000/MySite1/api

另外，如果请求是： http://localhost:8080，它应该重新写入http://localhost:3000/MySite1

大多数 React 文件的顶部有：

import React from 'react'

但react实际上并不是一个文件。那么它在哪里以及如何从无到有导入呢？

webpack devServer将我的项目包从更新为 后，"webpack-dev-server": "3.11.2"当"webpack-dev-server": "4.3.0"我启动项目时，我遇到了这个问题：

>> npm run start
> backoffice@1.0.0 start
> webpack serve --config webpack.dev.js

[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 'writeToDisk'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? } …

好吧，现在我已经在 stackoverflow 上阅读了很多不同的问题，但没有任何运气，它们似乎都转到旧版本的 webpack-dev-server。

我已经尝试了很多事情，但没有任何运气，我的小应用程序根本不会重新加载/重建多次。

我更改的是 app.tsx 内的文本添加和删除。其他的事情是添加和

标签。

我希望有人能给我提示

图片显示了我更改后保存的情况。

我的 webpack.config

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "main.js",
  },

  target: "web",
  devServer: {
    port: "3000",
    static: ["./public"],
    open: true,
    hot: false,
    liveReload: true,
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
};

我的package.json

{
  "name": "reactone",
  "version": "1.0.0",
  "description": "",
  "main": …

我有一个运行在http:// localhost:9090 /的后端服务.所有开始的呼叫/api/*都应转发给它,而不是/api在它前面.因此,当我打电话http://localhost:8080/api/my/route它应该代理http://localhost:9090/my/route.

如果我使用以下选项:

proxy : [{
  path : '/api/*',
  target : 'http://localhost:9090'
}]

在呼叫时http://localhost:8080/api/my/route,后端服务会抱怨它无法找到路由/api/my/route.

文档建议我可以使用node-http-proxy中的任何选项,但我无法弄清楚要使用的正确选项.

我需要使用哪些选项来获得所需的结果？

Webpack 2附带了新的解析设置,当我尝试修改config中的设置时,如下所示,webpackValidator抛出一个错误说

"模块"不允许"

const config = webpackValidator({

    context: resolve('src'),
    entry: './app.js',
    output: {
      filename: 'bundle.js',
      path: resolve('dist'),
      publicPath: '/dist/',
      pathinfo: ifNotProd(),
    },
    devtool: ifProd('source-map', 'eval'),
    module: {
      loaders: [
        {
          test: /\.js$/,
          loaders: ['babel'],
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['.js'],
      modules: [
        resolve(__dirname, 'src'),
        resolve(__dirname, 'node_modules')
      ]
    },
    plugins: [
      new DashboardPlugin()
    ]
  })

当尝试设置SCSS以使用Webpack在我的React应用程序上运行样式时，出现以下错误：

Module not found: Error: Can't resolve 'style' in '/Users/sachinkaria/Workspace/GC' @ ./app/index.js 4:0-29 @ multi ./app/index.js'

并在浏览器中：

Uncaught Error: Cannot find module "/styles/main.scss"

我的webpack.config.js配置如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');-
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},{
            test: /\.scss$/,
            loaders: ['style', 'css', 'sass']
        }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
}; …

我已经ASP.NET Web Application使用Windows身份验证创建了一个新的-> Web API 2项目。这在IIS Express中可以正常工作，但是要为我的React前端进行热重载，我尝试使用webpack-dev-server它并使其代理IIS Express。我之前在Cookie身份验证和令牌（Bearer）身份验证中都使用了此功能，但没有问题，但在Windows身份验证（NTLM身份验证）中却无法使用。

查看来自服务器的响应，我得到了预期的401 Unauthorized (401.2)响应，其标题www-authenticate: Negotiate, NTLM与预期的一样，但是我不认为客户端使用来重新发送请求Authorization: NTLM。

我尝试过的浏览器（Chrome，Firefox和IE）也无法正常提示我输入正确的凭据。

https://blogs.msdn.microsoft.com/chiranth/2013/09/20/ntlm-want-to-know-how-it-works/

我在webpack.config.js中的设置如下所示：

var proxy = 'localhost:57263';

devServer: {
    proxy: {
        '*': {
            target: 'http://' + proxy,
            changeOrigin: true,
        },
        port: 8080,
        host: '0.0.0.0',
        hot: true,
    },
}