标签: webpack-dev-server

我最近从 vue-cli 4.5.x 迁移到 5.0.x。

自从这次升级以来，服务器发送事件 (SSE) 似乎不再与 WebPack 开发服务器一起使用。
（我目前使用的是vue-sse）

请注意，在生产中它工作得很好。

我的 devServer 配置如下所示：

  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        ws: true,
        changeOrigin: true,
      },
    },
  },

尝试在浏览器中访问我的应用程序的主页时出现此错误：

Uncaught ReferenceError: require is not defined
at Object.events (main.bundle.js:90508:1)
at __webpack_require__ (main.bundle.js:91217:33)
at fn (main.bundle.js:91451:21)
at eval (emitter.js:1:20)
at Object../node_modules/webpack/hot/emitter.js (main.bundle.js:90413:1)
at __webpack_require__ (main.bundle.js:91217:33)
at fn (main.bundle.js:91451:21)
at eval (reloadApp.js:4:80)
at Object../node_modules/webpack-dev-server/client/utils/reloadApp.js (main.bundle.js:90371:1)
at __webpack_require__ (main.bundle.js:91217:33)

main.bundle 中的确切行是：

module.exports = require("events");

• 网页包5
• 节点16

我看到其他帖子提到了 type 和 nodeExternals，但我的问题似乎与此没有直接关系，因为我的 package.json 中没有提到 type，并且我的 weboack 文件中没有提到 nodeexternals。

webpack（.js）文件：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const DotEnv = require('dotenv-webpack');
    
module.exports = { …

下面是我的webpack.config.jswebpack 版本为 5.21.1 的后端服务器

/* eslint-disable */
const path = require('path');
const webpack = require('webpack');

module.exports = {
  target: 'node',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2',
  },
  plugins: [new webpack.IgnorePlugin(/\.\/native/, /\/pg\//)],
};
/* eslint-enable */

当尝试部署时，收到以下错误

[webpack-cli] Failed to load '/code/webpack.config.js' config
[webpack-cli] Invalid options object. Ignore Plugin has been initialized using an options …

我想注入webpack-dev-server.js文件.
但是根据文档,这应该手动完成,只有完整的URL:

来自:http://webpack.github.io/docs/webpack-dev-server.html#api

请注意,WebpackDevServer API没有内联模式. <script src="http://localhost:8080/webpack-dev-server.js"></script> 应手动插入HTML页面.

来自:http://webpack.github.io/docs/webpack-dev-server.html#hot-mode

<!-- It is important that you point to the full url -->
<script src="http://localhost:8080/webpack-dev-server.js"></script>

Run Code Online (Sandbox Code Playgroud)

文档中这两点的原因是什么？
为什么注入脚本标签不是一个好主意<script src="/webpack-dev-server.js"></script>？

我还在github上打开了一个问题:https://github.com/webpack/webpack/issues/1285

我的React Chrome扩展程序没有出现在我的React网络应用程序上,即使我已经阅读了所有组件,并正确地呈现它.一切都以iframe形式出现(截图附件).

这是我的webpack.config.js文件.

var path = require('path');
var webpack = require('webpack');

    module.exports = {
    entry: './main.js', 
    output: {path: __dirname, filename: 'bundle.js'}, 
    module: {
        loaders: [
            {
                test: /\.jsx?$/, 
                loader: 'babel-loader', 
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }, 
            {
                test: /\.css$/, 
                loader: 'style!css' 
            }, 
            {
                test: require.resolve('react'),
                loader: 'expose?React'  
            }
        ]
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ], 
    watch: true

    };

我的React版本,我相信0.14.7,react-dom是0.14.0.我也试过操作作为入口点的main.js文件.

我有

if (typeof window !== 'undefined') {
    window.React = React;
}

可以使用任何建议或帮助.

我的React应用程序在运行于webpack-dev-server的开发环境中运行良好，但不适用于生产环境（在Apache上）。它失败，在控制台或任何地方都没有任何错误。这是我的项目的代码结构。

当我运行命令npm run dist时，将在dist目录中创建app.js和index.html文件，并将这些文件复制到apht htdocs目录中的产品环境中。现在，当我打开域时，看到空白的index.html页面，没有呈现/安装任何React组件。我可以在网络标签中看到浏览器已成功获取app.js。

package.json

{
  "private": true,
  "version": "0.0.1",
  "description": "YOUR DESCRIPTION - Generated by generator-react-webpack",
  "main": "",
  "scripts": {
    "clean": "rimraf dist/*",
    "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
    "dist": "npm run copy & webpack --env=dist",
    "lint": "eslint ./src",
    "posttest": "npm run lint",
    "release:major": "npm version major && npm publish && git push --follow-tags",
    "release:minor": "npm version minor && npm publish && git push --follow-tags",
    "release:patch": "npm version patch && npm publish && git push --follow-tags", …

我正在尝试在我的项目中实现Facebook提供的"RichEditor"示例以下是代码:

import React from 'react;
import { Component } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
import { Map } from 'immutable';

'use strict';

const { Editor, EditorState, RichUtils } = Draft;

//rest of the code...

每当我尝试构建使用时webpack-dev-server,我都会收到以下错误.我检查了StackOverflow以查看是否有其他用户遇到了确切的错误.但是,找不到一个.

Module Build Failed: Duplicate Declaration "Editor"

'use strict';
> const { Editor, EditorState, RichUtils } = Draft;

export class ...{}

我哪里错了？

注意:我是ReactJS的新手.

我已经在Webpack开发服务器上对我的简单登录网站进行了完整的编码和功能。如何使用外部IP显示它？我已经通过端口9000将端口转发了我的路由器，但是当我尝试www.myIp：portnumber时，它不起作用。以下是我的webpack开发服务器的webpack配置。

//Webpack config
module.exports = {
  entry: './app/main.js',
  output: {
    path: './app',
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    contentBase: './app',
    port: 9000
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }
}

在我的项目中，我称：

$ webpack-dev-server --history-api-fallback

并启动上可用的快递服务器（我假设）localhost:8080。

效果很好，除了我想通过POST将表单提交到加载我的应用的iframe中；localhost:8080开发中和生产中的其他东西。

我不希望在开发中对POST数据做任何事情，但是在生产中，它必须是POST。

但是，当我尝试使用POST时， cannot find POST /

是否有配置选项或其他解决方案可让我使用webpack-dev-server？（我真的不想为此写我自己的服务器）。

我正在使用Babel和Webpack开发一个React应用，我想使用file-existsnpm中的软件包。我已经安装了该软件包并将其保存为项目的依赖项。运行npm start后，出现此错误：

./~/file-exists/index.js中的错误找不到
模块：错误：无法在C：\ GitHub \ CryptoPrices \ node_modules \ file-exists
@ ./~/file-exists/index.js中解析模块'fs' 3：9-22

file-exists使用fs的依赖，但由于某种原因，它不工作。如果我不需要Npm，Npm可以正常启动和运行file-exists。

这是我的webpack配置文件：

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      // exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

我是Webpack和Babel的新手，所以我有点迷路。