标签: webpack-dev-server

我试图让 Angular cli 的内部网络服务器（我认为 webpack 使用node-http-proxy）与 NTLM 身份验证一起使用，但出现了问题。

我这样设置 webpack 代理：

// in packages.json
...
"scripts": {
    "start": "ng serve --proxy-config proxy.conf.json",
...

proxy.config.json 的内容是：

{
  "/srv": {
    "target": "http://localhost/access_form",
    "logLevel": "debug",
    "auth": "LOGIN:PASS"
  }
}

我试图将 onProxyRes 函数添加到 JSON 选项对象，但这无法启动网络服务器。

有人对这个设置有过运气吗？有什么指点吗？

在我的 webpack 配置中，我希望能够执行以下操作：

module.exports = {
entry: {'main_public': [...], 'main_private': [...] },
...
plugins: [
   new CustomDefinePlugin({
      test: /_public$/,
      definitions: {PRIVATE_APP: false}
    }),
    new CustomDefinePlugin({
      test: /_private$/,
      definitions: {PRIVATE_APP: true}
    }),
   new webpack.optimize.UglifyJsPlugin({compress: {dead_code: true}})
],
...}

也就是说，我希望能够针对不同的入口点进行全局定义。

我尝试破解现有的DefinePluginwebpack 附带的内容，但似乎它parser._plugins在内部使用该系统。我还尝试test在传递给UglifyJsPlugin（并global_defs在那里使用）的选项中设置一个字段，但test似乎被忽略了。

以及关于如何在不分叉整个 webpack 的情况下轻松完成这项工作的想法……尽管我认为这是一个选择。

我正在尝试使用 ReactJS 构建我的第一个服务器端渲染。我的代码基于Redux 教程

应用程序运行时工作正常npm start( webpack && node server.js)。

我想使用热重载来在开发环境中快速调试应用程序。所以我start在我的 npm 配置中添加了该选项 ( webpack-dev-server --inline --hot)。请注意，我没有index.html 文件，因为react-router 正在选择要加载的正确JSX 文件。

npm start 打开我的公共文件夹并显示文件，但不启动我的应用程序。通常我会单击index.html 文件，但我没有。

我无法理解发生了什么事，也不知道如何解决。帮助表示赞赏。

包.json：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.prod.js -p",
    "start": "webpack-dev-server --inline --hot",
    "dev": "webpack && node server.js"
  },

webpack.config.js：

module.exports = {
    entry: './client.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/public'
    },
    module: {
        loaders: [
            {
                test: …

当我尝试在我的应用程序中包含react-share时，我遇到了下一个错误，所有编译都很好，如果我转到另一条路线，没有加载该库工作正常，但当我包含它时崩溃。

TypeError: util.inherits is not a function

我正在使用带有 webpack 2 的 webpack 开发服务器。我嘲笑了下一个模块

注意：我尝试模拟 utils，因为 util 未在非节点环境中定义。

node: {
    fs: "empty",
    child_process: "empty",
  },

我正在 Windows 开发系统上测试 webpack 和 node.js。我有这个脚本“webpack.config.js”

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/scripts.js",
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

当我使用生产标签调用 webpack 时，我收到以下错误：

C:\Users\srussell\Desktop\GitHub\nodejsTest\webpack.config.js:14
    new webpack.optimize.OccurenceOrderPlugin(),
    ^

TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
    at Object.<anonymous> (C:\Users\srussell\Desktop\GitHub\nodejsTest\webpack.config.js:14:5)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at …

我继承了一个 Angular+Typescript 项目。开发环境使用 gulp 的 Web 服务器，我正在尝试切换到 webpack-dev-server，以便我们可以启用热模块替换。

当我从 build/ 目录运行 webpack-dev-server 时，命令失败，列出大约 700 个 TypeScript 错误。我们宁愿不修复它们。即使出现 TypeScript 错误，有什么方法可以使用 webpack-dev-server 吗？

我的理解是，即使发生打字稿错误，webpack 仍然应该正确创建构建文件并启动开发服务器，除非您启用 webpack-fail-plugin，而我没有启用该插件。

这是我当前的 webpack.config.js 文件：

'use strict';
var webpack = require('webpack');
var CompressionPlugin = require("compression-webpack-plugin");

var config = {
    entry: {
        build:  './app/core/bootstrap.ts',
        //adminbuild: './app/core/adminbootstrap.ts',
        //report: './app/core/reportbootstrap.ts',
        vendor: ["angular", "angular-material"]
    },

    output: {
        path: __dirname + '/build',
        publicPath: '',
        filename: '[name].bundle.js'
    },

    devtool: 'source-map',

    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js', '.json', '.jsx', '.js']
    },

    module: { …

我正在创建一个与 Webpack 捆绑在一起的 React 和 React-router v4 应用程序。我正在使用 Webpack 创建异步分割点，以用于按需应用程序的反应路由器路由的异步加载包。

假设我的应用程序称为“myapp”，当我将其部署到我的服务器时，我的静态资产需要从以下位置提供：

/myapp/static/<assetName>

为了在部署到服务器时异步包加载正常工作，我的 Webpack 输出配置如下：

output: {
  path: path.resolve(__dirname, "build"),
  publicPath: "/myapp/static/",
  chunkFilename: "[name].[chunkhash].bundle.js",
  filename: "[name].[chunkhash].bundle.js"
}

在我的 devServer 部分我有这个：

devServer: {
  historyApiFallback: true,
  inline: true,
  port: 4000,
  publicPath: "/myapp" // this is so my app is served from http://locahost:4000/myapp 
}

当我实际部署到我的服务器时，我没有任何问题，但是当我运行 webpack-dev-server 并访问时：

http://localhost:4000/myapp

...html 已提供，但为我的捆绑包生成的所有 URLHtmlWebpackPlugin均已提供/myapp/static/<bundleName>，因此无法获取，因为捆绑包正在提供/mpapp/<bundleName>。

如何配置 webpack-dev-server 进行重写，/myapp/static/<bundleName>以便/myapp/<bundleName>它将路由到实际在本地提供服务的包/myapp？

我已经尝试了各种重写和代理指令，但我似乎只是破坏了应用程序 - 我确信有一种我忽略的简单方法。

非常感谢。

我的项目中的 webpack 运行成功，但是当我到达所需的端口时，它会显示目录文件。您可以查看相同的图像。

我的 webpack.config.js

const path = require('path');

module.exports = {
  entry: './app/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    port: 8100
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

包.json

{
  "name": "react_router",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "vinay",
  "license": "ISC",
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^2.0.1" …

我尝试将 HMR 添加到我的 webpack 5 配置中，但出现了严重错误。第一次正确编译，但在代码更改后重新编译时 - 它以HookWebpackError: Cannot read property 'updatedChunkIds' of undefined. 如果我删除hot: true选项 - 一切正常。

我的配置：

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const ImageminPlugin = require("imagemin-webpack-plugin").default;
const SVGSpritemapPlugin = require("svg-spritemap-webpack-plugin");

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

const PATHS = {
  src: path.join(__dirname, "./src"),
  dist: path.join(__dirname, "./dist"),
  icons: path.join(__dirname, "./src/assets/icons")
};

const PAGES_PUG = `${PATHS.src}/pug/`;
const PAGES_TO_CONVERT = fs
  .readdirSync(PAGES_PUG) …

在旧版本的 webpack-dev-server（即 3 及以下）中，我们可以通过设置 的值，使用ngrok隧道简单地暴露 webpack 和 webpack-dev-server 的 websock devServer.public，如下所示：

// WDS v3
devServer: {
  public: 'react-tunnel.ngrok.io',
  // other webpack devServer config
}

这在 React 等框架中开发应用程序时特别有用，因为我们可以创建从本地机器到公共 URL 的安全隧道，以便轻松测试 Web 应用程序。

但是，在最新版本的 webpack-dev-server (v4) 中，该public属性已被替换为有利于client.webSocketURL对象 ( source )。我无法找到任何资源来使用 ngrok 进行这项工作，因为当我将 指向devServer.client.webSocketURL.hostname我的 ngrok 隧道时，websocket 没有正确连接。

// WDS v4

devServer: {
  client: {
    webSocketURL: {
      hostname: 'react-tunnel.ngrok.io',
    },
  },
}

上述实现只是部分解决方案，因为 websocket 没有正确设置，因此它不会热重载。

有谁知道解决这个问题的方法是什么，这样 ngrok 将再次与 webpack-dev-server 一起工作？