标签: webpack-dev-server

我安装了 webpack^3.0.0 和 webpack-dev-server^2.9.1 （在项目上和全局上）。在项目根目录中运行时webpack-dev-server，出现错误

Invalid configuration object. webpack-dev-server has been initialised 
using a configuration object that does not match the API schema.
 - configuration has an unknown property 'error'. These properties are 
valid:
object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, 
filename?, publicPath?, port?, socket?, watchOptions?, headers?, 
clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, 
pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, 
https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, 
features?, compress?, proxy?, historyApiFallback?, staticOptions?, 
setup?, before?, after?, stats?, reporter?, noInfo?, quiet?, …

我能够让 min-css-extract-plugin top 生成 css 文件就好了，但我似乎无法让它与 SASS 一起使用。当我使用 webpack 开发服务器时，它运行得很好，但它不断将我的 scss 插入我的 javascript 文件，而不是创建单独的 CSS 文件。

我有index.html，index.js和main.scss存储在/src下

webpack.config.js：

const MiniCssExtractPlugin = require("mini-css-extract-plugin")


module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // fallback to style-loader in development
          process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
      ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
}

webpack-dev-server通过强制执行特定标头值试图减轻哪些安全风险Host？

默认情况下，webpack-dev-server仅允许Host标头指定本地环回地址（localhost、127.0.0.1等）的连接。所有其他主机都会收到此响应：“无效的主机标头”。但当然--allowed-hosts/allowedHosts配置允许扩大此限制。

这似乎仅基于标题Host。我可以使用curl设置自定义Host标头，并且请求成功：

curl -X GET -H "Host: http://0.0.0.0:9001/" http://me.internal.example.com:9001/\n

所以我很好奇\xe2\x80\x94 如果allowedHosts不阻止来自curl 或其他自定义用户代理的连接，它解决了什么问题？它似乎只针对使用普通浏览器的普通用户，以保护他们免受在错误主机上提供服务的站点的影响。但是中间人攻击可以轻松代理连接并覆盖主机标头。

为了防止 MITM 攻击，您可以使用 https（带有浏览器信任的证书）。但在这种情况下，证书本身似乎可以缓解 MITM 攻击。

我确信我遗漏了一些东西，所以任何进一步的解释都是值得赞赏的。

我有一个简单的 ReactJS+Typescript 应用程序（与 Webpack 捆绑在一起），我最近几天一直在设计它。现在，我正在开始后端连接部分（不是我的领域，也不是我在这种情况下的责任），我遇到了一些困难。主要问题是浏览器上的 CORS 错误。这是我的设置：

    "webpack": "^4.30.0",
    "webpack-dev-server": "^3.3.1",
    "typescript": "^3.4.5",
    "react": "^16.8.6",
    "axios": "^0.18.0",
    Chrome version 74.0.3729.131 (64-bit)

没有任何类型的建议或实验，这是我遇到的错误：

我尝试了几种方法来解决这个问题，但没有一个真正解决它。它们如下：

1. 在我的webpack.dev.ts配置文件中，我配置了 webpack 代理属性。我这样配置：

  devServer: {
    contentBase: path.join(__dirname, process.env.PUBLIC_PATH || '../dist'),
    compress: true,
    host: process.env.DEV_HOST || 'localhost',
    port: process.env.DEV_PORT || 8000,
    open: 'chrome',
    proxy: {
      '/api': {
        target: 'http://<ip>:8888',
        secure: false,
      },
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': '*',
    },
  },

向后端的请求构建如下：

const config = {
  method: 'post',
  url: '/api/login',
  data: { password: password …

我是 Docker 新手，我尝试运行create-react-app图像的容器，因此这些是我已完成的步骤：

1. npx create-react-app frontend

2. 我创建了Dockerfile.dev如下所示：

   FROM node:alpine
   WORKDIR '/app'
   COPY package.json .
   RUN npm install
   COPY . . 
   CMD ["npm" , "run" , "start"]
   

   Run Code Online (Sandbox Code Playgroud)

3. 我使用此命令来构建图像：

   docker build -f Dockerfile.dev .
   

   Run Code Online (Sandbox Code Playgroud)

4. 当我使用提供的图像 ID 运行容器时：

   docker run -p 3000:3000 my_docker_image_id
   

   Run Code Online (Sandbox Code Playgroud)

正如此屏幕截图所示，什么也没有发生。

但是，当我将-i参数添加到命令中时，一切正常，如以下屏幕截图所示：

docker run -p 3000:3000 -i my_docker_image_id

有什么想法吗？

我正在尝试使用 React Native 为 Web 应用程序配置 React-navigation。为此，我在 NavigationContainer 上设置了链接选项，以便我可以使用以下代码从浏览器 URL 访问我的页面：

const linking = {
  prefixes: ['http://localhost:8080/', 'http://localhost:8080', 'localhost:8080'],
  // prefixes: [prefix],
  config: {
    screens: {
      SignIn: "SignIn",
      SignUp: "SignUp",
      Landing: '*',
    },
  }
};

function AppContainer() {

  return ( 
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <AppStack.Navigator>
        <AppStack.Screen name="SignIn" component={SignInPage}/>
        <AppStack.Screen name="Landing" component={LandingPage}/>
        <AppStack.Screen name="SignUp" component={SignUpPage}/>
        <AppStack.Screen name="Home" component={HomePage}/>
      </AppStack.Navigator>
    </NavigationContainer>
  );
}

当我转到“http://localhost:8080/”时，我被重定向到“http://localhost:8080/SignIn”（这很好），并且应用程序正在运行。问题是，如果我从浏览器访问“http://localhost:8080/SignIn”，我会收到“Cannot GET /SignIn”，并且该应用程序无法正常工作...

我正在使用这些版本：

"@react-navigation/bottom-tabs": "^5.11.1",
"@react-navigation/native": "^5.8.9",
"@react-navigation/stack": "^5.12.5",

假设最终生成的捆绑包webpack大约为 15MB。
除了第一次在网站上加载缓慢之外，与 500KB 的捆绑包相比，是否存在任何重大的性能问题？（已被丑化，或使用 .min npm 包）

基本上我想要实现的目标是让我的应用程序运行在local.myapp.com而不是localhost.

注意：在主机内部，/etc/hosts我有127.0.0.1 local.myapp.com条目，并且我的 docker-compose 配置有ports: 80:80.

当我在主机上运行此命令时：yarn serve --port=80 --host=local.myapp.com一切正常，我可以通过 访问我的 Vue 应用程序local.myapp.com。但是我无法使用 Docker 以相同的方式配置它。

以下所有命令都在 docker 容器中运行：

输入http://local.myapp.com/-yarn serve --port=80给我无效的主机标头

输入http://local.myapp.com/-yarn serve --port=80 --host=local.myapp.com给我ERR_EMPTY_RESPONSE。

在容器内部进行wget http://local.myapp.com:80工作。

我缺少什么？

我正在遵循这些webpack 5 指南，并且 webpack-dev-server v4.3.1 不会实时重新加载示例项目（编辑任一 JavaScript 文件后确实会发生重新编译）。也许我错过了一步？

1.你能告诉我问题出在哪里吗？

这是我的配置：

包.json

{
  "name": "components",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "devDependencies": {
    "autoprefixer": "^10.3.7",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.3.9",
    "tailwindcss": "^2.2.16",
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0",
    "webpack-dev-middleware": "^5.2.1",
    "webpack-dev-server": "^4.3.1"
  },
  "scripts": {
    "start": "webpack serve --open",
  },
  "repository": {
    "type": "git",
    "url": "components"
  },
  "author": "Karl",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

webpack.config.js

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

我正在尝试使用 fetch 发出发布请求。通常，当我用来npm start启动服务器时它工作得很好。但是使用 webpack 开发服务器时它给了我这个错误：

这是我的服务器端代码：

require('dotenv').config();

const mockAPIResponse = require('./mockAPI.js')

const PORT = 8081

const apiKey = process.env.API_KEY
const baseUrl = 'https://api.meaningcloud.com/sentiment-2.1'

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const fetch = require('node-fetch')
var path = require('path')
const app = express();

app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(express.static('dist'))

app.get('/', function(req, res) {
    res.sendFile('dist/index.html')
        //res.sendFile(path.resolve('src/client/views/index.html'))
})
app.post('/api', async(req, res) => {
    console.log("you key is", apiKey)
    const enteredUrl = req.body.url;
    const apiUrl = …