标签: webpack-dev-server

我已经添加react-rails到我们正在慢慢迁移以做出反应的现有项目中。

当前的 webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .tsx
    - .ts

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/ …

以下Webpack 开发服务器配置在 macos 系统上运行不会出现错误：

module.exports = {

    // [...]

    devServer: {
        host: 0.0.0.0,
        port: 8080,
        contentBase: "/dist",
        hot: true,
        inline: true,
        watchOptions: {
            poll: true
        }
    },

    // [...]

}

我可以从连接到同一网络并使用机器的本地 IP (192.168.1.65:8080) 的移动设备访问 Web 应用程序。

同样的配置在Windows上不起作用，似乎无法在浏览器上打开0.0.0.0。但使用 0.0.0.0 以外的任何其他 IP 都不允许从移动设备进行访问。有谁知道如何在 Windows 上解决这个问题？

我有一个项目已经完美运行了几个月，可以npm run serve毫无问题地运行。每当我切换网络时，我都必须终止并再次运行命令，但这从来都不是问题，服务器总是可以重新启动。

直到现在 - 无论我做什么，我都无法启动服务器。我收到此错误：

npm run serve

> xbs@0.6.2 serve D:\workspace\[PROJECT]
> vue-cli-service serve

 INFO  Starting development server...
 10% building 1/1 modules 0 active ERROR  TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined
    at Server.<anonymous> (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:667:47)
    at Array.forEach (<anonymous>)
    at new Server (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:666:22)
    at serve (D:\workspace\[PROJECT]\node_modules\@vue\cli-service\lib\commands\serve.js:137:20)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

我最后一次收到这条消息是在我忘记设置.env文件时，但这是一个以前的工作副本，其中设置了所有必需的文件，自上次工作运行以来没有任何更改。

我什至尝试过提取 repo 的新副本，运行npm i并设置所有 …

我正在尝试为 ReactJs 设置 webpack。我不知道我的 Webpack 配置文件有什么问题，它给了我

未找到条目模块中的错误：错误：无法解析“D：\ wd \ javascript \ Projects \ ReactJS-Basics中的“./src”

代码在这里 - 两个文件“Webpack.config.js”和“Package.json”

Webpack.config.js 代码是：

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

var DIST_DIR = path.resolve(__dirname,'dist');
var SRC_DIR = path.resolve(__dirname,'src');

var config = {
    entry: SRC_DIR+'/app/index.js',
    output:{
        path:DIST_DIR+'/app',
        filename:'bundle.js',
        publicPath:'/app/'
    },
    module:{
        rules: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                use:{
                    loader:'babel-loader',
                    query:{
                        presets:['react','es2015','stage-2']
                    }
                }
            }
        ]
    },
    mode: 'development',
    watch: true

}

module.export = config;

Package.json 文件是

{
  "name": "reactjs-basics",
  "version": "1.0.0",
  "description": "", …

我有一个 VUE 应用程序，我需要在外部链接而不是本地主机上运行它。

我尝试创建一个

vue.config.js

devServer: {
    host: 'http://my-testing-web-address.com',
    port: 8080,
    ...
}

并设置了devserver，但仍然没有变化

当我跑步时

npm run serve

它说

App running at:
- Local:   http://localhost:8080/ 
- Network: http://192.168.0.100:8080

有什么方法可以设置外部开发服务器吗？

我使用 Create-react-app 和npm start命令在开发服务器中为我的应用程序提供服务。默认情况下，应用程序由https://localhost:3000/提供服务。然而，我的应用程序使用需要特定上下文路径的cookie。如何从https://localhost:3000/app/提供应用程序？

我正在react-hot-loader本地环境中使用它来开发我的 React + Firebase 应用程序。

对于没有 API 调用的基本组件，我可以立即看到更改（它只更新更改的部分）。但是，当我设计一个在内部具有 API 调用的组件（useEffect如下例所示）时，它会不断重新运行所有内容（包括效果），并且我会丢失当前状态。

我更改某些内容后的日志：

我不确定问题是否是由于useEffectAPI 调用引起的。

问题

我怎样才能解决这个问题？就像，如果我更改标签的 CSS 颜色，我希望所有状态保持不变并仅更新更改的部分。

例子：

ComponentWithApiCall.js

function ComponentWithAPICall() {

  const [loading,setLoading] = useState(true);
  const [dataFromAPI,setDataFromAPI] = useState(null);

  useEffect(()=>{

    // CALL API WAIT FOR RESULTS
    setDataFromAPI(result);
    setLoading(false);

  },[]);

  return(
    dataFromAPI &&
      <div>
        // WHATEVER
      </div>
  );
}

这是我当前的配置react-hot-loader。我也在使用webpack和webpack-dev-server。

webpack.dev.js

  devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    historyApiFallback: true
  },

  plugins:[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.HashedModuleIdsPlugin()
  ], …

我使用脚本语言创建了一个后端项目，并使用 Vue-CLI 创建了一个前端项目。该项目已在域中进行测试example.localhost。在测试环境中我运行Vue-CLI开发版本（localhost:8080）并在项目页面上使用它example.localhost:80。这部分有效。“热重载”不起作用。

在 Vue-CLI、Webpack 和 SockJS 项目存储库上，我看到了有关由于 SockJS 的更改而导致此模块失败的问题线程，但添加了一个解决方法，直到 SockJS 案例得到解决。

我在我的案例中找到了一个有效的配置，但是这个配置非常依赖于测试域名，这是我想避免的。我希望它能够在其他测试域上工作，但它无法以当前的形式工作。

在之前的尝试中，我什至遇到了 CORS 的情况，但在准备这个示例时，我无法再次获得这种状态。我不接受 的解决方案disableHostCheck: true。问题是，它必须在不影响安全性的情况下工作。

./ docker-compose.yml

version: '3'

services:
  dev:
    image: gander/dev:7.3
    volumes:
      - ./public/index.html:/www/example.localhost/public/index.html
    ports:
      - 80:80

./public/index.html​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
<div id="app">Vue App</div>
<script src="http://localhost:8080/js/app.js"></script>
</body>
</html>

./包.json

{
  "name": "sandbox-vue-dev",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": …

Webpack 开发服务器在未登陆索引页面时返回 404。

问题是当将示例登陆到localhost:8080/page应用程序请求bundle.js然后http://localhost:8080/page/bundle.js?08386a6ab2de89169893返回 404 时

http://localhost:8080/bundle.js?08386a6ab2de89169893当来自索引开发服务器的尝试请求返回 200 时

我的 webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default

const styledComponentsTransformer = createStyledComponentsTransformer()

const basePath = __dirname

module.exports = function(env, arg) {
  const base = {
    context: path.join(basePath, 'src'),
    entry: ['./index.tsx'],
    output: {
      path: path.join(basePath, 'dist'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          loader: 'graphql-tag/loader',
        }, …

我是 JavaScript 新手，并遵循Github上的清晰节点教程。但是无论我在所有模块中尝试过什么，当我运行yarn dev:wds 时，我都会收到此错误消息

    ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Renate\projects'     
    ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: 
    Error: Can't resolve './src'  in 'C:\Users\Renate\projects'  @ multi (webpack)-dev- 
    server/client?http://localhost:8

我已经尝试过这个解决方案，但是重新安装 babel-loader 7 并没有解决我的问题。我还尝试重新安装整个 webpack-module，但这也没有解决我的问题。

我的 webpack.config.babel.js 文件：

    ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Renate\projects'     
    ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: 
    Error: Can't resolve './src'  in 'C:\Users\Renate\projects'  @ multi (webpack)-dev- 
    server/client?http://localhost:8

我的 babelrc.json 文件：

// …