标签: webpack-dev-server

正在生成 bundle.js 文件，但不在 webpack.configure.json 中指定的文件夹中（具体放入哪个文件夹和路径，不清楚）浏览器显示正确的输出。没有错误。我已经从命令提示符安装了以下内容（对于 Windows）

• npm install webpack --save
• npm install webpack-dev-server --save
• npm install react --save
• npm install react-dom --save
• npm 安装 babel-core
• npm 安装 babel-loader
• npm 安装 babel-preset-react
• npm 安装 babel-preset-es2015

我希望看到在 sample3 文件夹中创建的 bundle.js 文件，但在执行命令 webpack-dev-server 后它不在那里

webpack.configure.json 文件如下

    module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }
}

下面给出了 package.json 文件

{
  "name": "sample3",
  "version": "1.0.0",
  "description": "reactjs sample application",
  "main": "app.js",
  "scripts": {
   "start": "webpack-dev-server --hot"   },
  "keywords": [
    "reactjs"
  ],
  "author": "abc", …

我正在尝试通过 webpack 2 开发服务器在开发中提供静态文件（图像）。我似乎无法让它发挥作用。这将是我的 webpack 文件，我正在为文件夹中包含图像的 Angular 2 应用程序提供服务/src/assets/images：

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'app': './src/main.ts',
    },

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [{
                    loader: 'awesome-typescript-loader',
                    options: { configFileName: helpers.root('src', 'tsconfig.json') }
                } , 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[ext]'
            },
            {
                test: /\.scss$/,
                exclude: …

我正在努力根据以下内容在docker容器中获取webpack开发服务器设置 node:latest

尽管尝试了Node Sass中的所有各种错误，都无法找到适合您当前环境的绑定，但我仍然遇到相同的错误：

web_1         | ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/sass/style.sass
web_1         | Module build failed: Error: Missing binding /prject/node_modules/node-sass/vendor/linux-x64-59/binding.node
web_1         | Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 9.x
web

这是当前

# Dockerfile
RUN yarn cache clean && yarn install --non-interactive --force
RUN rm -rf node_modules/node_sass
RUN npm rebuild node-sass

重建步骤表明已安装二进制文件并签出：

Binary found at /advocate/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine

我也感到困惑的是

web_1         | Found bindings for the …

我知道我不是唯一面临这个问题的人，但在网上搜索了一段时间并尝试了它给我的一切之后，我必须在这里询问我的情况。

每当我尝试访问我的应用程序的路线时，我都会收到一个流行的错误，即在不使用与应用程序相关的方式时收到 404。例如，如果我在“/map”时刷新页面，它会显示“无法获取/map”。

这是我当前的配置，虽然我尝试了几个不同的 devServer: {} 设置并使用 publicPath 等：

webpack.config.js：

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    devServer: {
        historyApiFallback: {
            index: "dist/index.html"
        }
    }
};

应用程序.js

import React, { Component } from "react";
import { connect } from "react-redux";

import { BrowserRouter, Route } from "react-router-dom";

import Homescreen from "./Homescreen";
import Map from …

我有一个问题,我无法导航到路径大于1节的路由,如此使用react-router-dom@4.2.2:此外,这是我有这个问题的回购的Github链接.

https://github.com/ShawnCholeva/React-Typescript-Webpack4-Router

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//All routes work if I use HashRouter here instead of BrowserRouter

class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path='/' component={ Login }/> <--- Works
                    <Route exact path='/accountSetup/:guid?' component={ AccountSetup }/> 
                    ^-- Above works when just '/accountSetup' but fails when I do '/accountSetup/123'
                    <Route component={ NotFound } /> <--- Works
                </Switch>
            </Router>
        );
    } …

阅读包括“ Access-Control-Allow-Origin”在内的许多方法，但没有一种对我有用。

我使用@ angular / common / http模块和外部url作为数据源。通过尝试获取数据来获取错误：///// .................

Failed to load http://accounts.......com/accounts: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 503.

account.service.ts：

Failed to load http://accounts.......com/accounts: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 503.

app.module.ts

import { Injectable                    } from '@angular/core';
import { Router                        } from '@angular/router';
import { HttpClient, …

启动webpack-dev-server后，可以直接进入静态路由（如http://localhost:3456/one），但不能直接进入动态路由（如http://localhost:3456/two/1234）。

我相信我在 webpack-dev-server 配置中遗漏了一些东西，但不确定是什么。

浏览器控制台输出此错误：

GET http://localhost:3456/two/dev-bundle.js 404 (Not Found)
Refused to execute script from 'http://localhost:3456/two/dev-bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require("webpack")

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  entry: [
    "./index.js",
  ],
  output: {
    filename: "dev-bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [ …

我认为我的应用程序在开发和生产模式下都遇到了热重载问题。

基本上，我有一个 index.js 文件，我在其中渲染一个 App 组件。在我的应用程序组件中，我只需控制台日志“Hello from APP”。在我看来，这应该只输出一次，但事实并非如此。输出如下：

[HMR] Waiting for update signal from WDS...
Hello from APP
[WDS] Hot Module Replacement enabled.
[HMR] Waiting for update signal from WDS...
Hello from APP
[WDS] Hot Module Replacement enabled.

完整的源代码可以在这里找到： https: //github.com/RosarioAleCali/react-example

谁能告诉我什么可能导致这个问题？也许是我的 webpack 配置文件？

另外，当我直接输入 URL 或刷新页面时，也会出现此问题。我很想修复它，因为在一个更复杂的示例中，我需要发出 API 请求并显示数据，因此当前热加载的方式根本不好。

我在项目上使用webpack-dev-server。项目使用Spring Boot + Tiles + Vue + Webpack。

环境：

OS: Mac OS
Node Version: 9.4.0
NPM Version: 5.6.0
Webpack Version: 4.25.1
webpack-dev-server Version: 3.1.10

在本地环境中，FE端口使用8080，而webpack-dev-server端口为9090。Webpack捆绑的文件在/ front / static-dev / build /中创建。因此，我使用如下所示的代理选项。

devServer: {
    publicPath: 'http://localhost:9090/front/static-dev/build/',
    port: 9090,
    proxy: {
        '/**': {
            target: 'http://localhost:8080',
            secure: false,
            changeOrigin: true
        }
    },
    open: true
}

启动webpack-dev-server后，将正常加载静态资源（例如，JSP，捆绑的js文件，CSS文件或图像等）。但是，每当我请求一些api时，webpack-dev-server都会发生相同的错误。错误日志如下。

[HPM] Error occurred while trying to proxy 
request /api/v1/users/name from localhost:9090 to 
http://localhost:8080 (HPE_INVALID_CHUNK_SIZE) 
(https://nodejs.org/api/errors.html#errors_common_system_errors)

请求一些API后，我检查了Eclipse上的日志，并且通常正在发出Api请求。在Chrome Consloe中，如下所示登录。

http://localhost:9090/api/v1/users/name net::ERR_CONTENT_DECODING_FAILED 502 (Bad Gateway)

我认为问题在于回应。在Google中使用Webpack搜索HPE_INVALID_CHUNK_SIZE，找不到任何信息。

我怎么解决这个问题。

谢谢。

我正在使用这个 webpack 文件，但出现错误。

这是 webpack 文件：

const path = require('path');
module.exports = {
target: 'node',
entry: './src/index.js',
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
},
module: {
    rules: [
        {
            test: /\.js?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
                presets: [
                    'react',
                    'stage-0',
                    ['env', { targets: { browsers: ['last 2 versions']}}]
                ]
            }
        }
    ]
  }
}

这是错误消息：

Invalid configuration object. Webpack has been initialised using a 
    configuration object that does not match the API schema.
    - configuration.context: The provided value …

我正在开发一个带有 webpack 的小型 Dapp 和基于 Web 组件（lit-library）的 UI。为了捆绑文件，我使用 webpack 和 webpack-dev-server 来刷新页面。一切对我来说都很好。

现在，我尝试使用 web3 与我的智能合约交互，但是当我导入 web3 并从中创建一个新实例时，出现以下错误：

    Uncaught Error: Cannot find module 'http'
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
xml-http-request.js:21:19
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        <anonymous>
        <anonymous>
        <anonymous>

此错误出现在我的 Firefox 的控制台中。

包.json

    Uncaught Error: Cannot find module 'http'
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
xml-http-request.js:21:19
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__ …

我是 Office 插件开发的新手，但在我们的组织中有一个项目。安装 package.json 文件中提到的所有依赖项后，当我尝试运行“npm run dev-server”时，出现以下错误：

c:\\git\\sample-project\\ui-addin>npm run dev-server\n\n> ui-addin@1.0.0 dev-server c:\\git\\sample-project\\ui-addin\n> webpack-dev-server --mode development\n\nYou already have trusted access to https://localhost.\nCertificate: C:\\Users\\Manish.Kumar\\.office-addin-dev-certs\\localhost.crt\nKey: C:\\Users\\Manish.Kumar\\.office-addin-dev-certs\\localhost.key\ni \xef\xbd\xa2wds\xef\xbd\xa3: Project is running at https://127.0.0.1:3000/\ni \xef\xbd\xa2wds\xef\xbd\xa3: webpack output is served from /\ni \xef\xbd\xa2wds\xef\xbd\xa3: Content not from webpack is served from c:\\git\\sample-project\\ui-addin\n(node:19272) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation\nat Function.getCompilationHooks (c:\\git\\sample-project\\ui-addin\\node_modules\\custom-functions-metadata-plugin\\node_modules\\webpack\\lib\\NormalModule.js:207:10)\nat c:\\git\\sample-project\\ui-addin\\node_modules\\custom-functions-metadata-plugin\\lib\\customfunctionsplugin.js:41:36\nat SyncHook.eval [as call] (eval at create (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\HookCodeFactory.js:19:10), <anonymous>:7:1)\nat SyncHook.lazyCompileHook (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\Hook.js:154:20)\nat Compiler.newCompilation (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\lib\\Compiler.js:631:26)\nat c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\lib\\Compiler.js:667:29\nat eval (eval at create (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:14:1)\nat …