标签: webpack-dev-server

我想尝试做一个相对简单的设置:

• 具有HTML虚拟主机的Apache服务器.
• Webpack和Webpack Dev Server用于资产重新加载和生成.

为此,Webpack Dev Server proxies另一台服务器要传递不知道如何处理的请求.

使用基本的python服务器(可以工作):

1. 在http:// localhost:5000上启动python webserver .
2. 运行npm start.
3. Webpack Dev Server使用http:// localhost:9090启动并代理python服务器.
4. 访问http:// localhost:9090并查看python服务器和Webpack资产的HTML结果.

使用Apache服务器:

1. 启动Apache服务器.
2. 运行npm start.
3. Webpack dev服务器使用http:// localhost:9090启动并代理Apache服务器.
4. 访问localhost:9090浏览器自动重定向到http:// localhost并显示"It works!".

如果我在浏览器中单独访问http://vhost.name,我会看到正确的HTML.我的环境是默认的Apache Server版本:Mac OSX El Capitan上的Apache/2.4.16(Unix).

的package.json

"scripts": {
  "test": "node server.js",
  "start": "npm run start-dev-server",
  "start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 --progress --colors",
  "build": "webpack"
},

webpack.config.js

/*global require module __dirname*/
var webpack …

我正在学习Webpack并遇到这篇文章.我对什么是热模块替换(HMR)有一般的了解.我可以通过以下示例代码配置webpack HMR插件:

var plugins = [ new webpack.HotModuleReplacementPlugin(), // using HMR plugin
            new HtmlWebpackPlugin({template: './index.html'})
        ]; 

module.exports = {
    // webpack config object
    context: entryBasePath,
    entry:{
        app: ['webpack/hot/dev-server', './bootstrap.js']
    },
    output: {
        path: outputBasePath,
        filename: './bundle.js',
        sourceMapFilename: '[file].map' // set source map output name rule
    },
    devtool: 'source-map', // enable source map
    plugins: plugins, 
    module: {
        loaders: [
            { test: /\.scss$/, loader: 'style!css!sass'}, 
            { test: /\.tpl$/,  loader: 'raw' }, 
            {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url?limit=10000'
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, …

所以我花了过去24小时调整我的代码并试图让它工作并搜索SO和谷歌,但没有运气 - 也许有人可以提供帮助!

我的React应用程序在Express上运行,但使用的是webpack-dev-server中间件.当我加载页面时,图像显示为空白,就好像它们不存在一样.我没有在我的控制台中收到任何错误消息(例如没有404错误),但图像元素只是显示alt文本而不显示实际png或svg应该在那里.

顺便说一句,不仅仅是反应组件无法呈现图像 - 我尝试将图像文件硬编码到我的index.html文件中作为测​​试,这产生了相同的结果.

这是我的代码:

server.js(截断以排除数据库设置和其他快速路由)

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const path = require('path');
const mongoose = require('mongoose');
const config = require('./webpack.dev.config');

// SERVER SETUP

const app = express();
const router = express.Router();

var publicPath = path.resolve(__dirname, 'public');

compiler=webpack(config);

app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    stats: {colors: true}
}));

app.use(webpackHotMiddleware(compiler, {
    log: console.log
}));

//Routes

// ...additional routes

app.get('*', function(req, res){ …

我有一个使用角度CLI构建的简单Web应用程序。我希望它使用Web套接字与后端通信。我已经编写了后端，并使用服务器可以在套接字上发送和接收的简单index.html页面进行了测试。

在我的angular-cli项目中，我设置了一个代理配置文件来设置到后端的代理。

proxy.conf.json

{
  "/sock": {
    "target": "http://localhost:3000",
    "changeOrigin": true,
    "ws": true,
    "logLevel": "debug"
  }
}

然后使用以下命令启动服务器。

ng serve --proxy-config proxy.conf.json

现在，我有一项服务，只是尝试打开一个套接字并发送一个固定的字符串，我希望该字符串被后端记录下来。

import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';

@Injectable()
export class ChatService {

  private socket: any;

  constructor() {
    this.socket = io({ 'path': '/sock' });
    this.socket.emit('chat message', 'Hello World from browser!');
   }

}

注意：无论是否使用url的/ sock部分，我都可以这样做。

我启动两个服务器。在浏览器中没有任何控制台错误。但是在有角CLI Web包服务器中，我收到以下消息。

10% building modules 2/2 modules 0 active[HPM] Proxy created: /sock  ->  http://localhost:3000
[HPM] Subscribed to http-proxy events:  [ …

我正在使用具有以下设置的Webpack DevServer：

devServer: {
    proxy: {
        '*': {
            target: 'https://localhost:44369',
            secure: true
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    https: false
}

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

它可以正常工作，HTTP但是当我现在将代理切换到HTTPS我时，我开始出现错误。

在命令提示符下收到以下消息：

[HPM]尝试将请求/从localhost：8080代理到https：// localhost：44369 （UNABLE_TO_VERIFY_LEAF_SIGNATURE）（https://nodejs.org/api/errors.html#errors_common_system_errors）时发生错误

我试图将Node设置NODE_TLS_REJECT_UNAUTHORIZED为，0但这无济于事。

new webpack.DefinePlugin({
    'process.env.NODE_TLS_REJECT_UNAUTHORIZED': 0
})

有什么方法可以访问生成的证书CA并将其添加到“受信任的根证书颁发机构”？这会有所帮助还是我还需要更改其他内容？

如果我切换https到true相同的错误。

生成SSL证书

...

[HPM]尝试将请求/从localhost：8080代理到https：// localhost：44369 （UNABLE_TO_VERIFY_LEAF_SIGNATURE）（https://nodejs.org/api/errors.html#errors_common_system_errors）时发生错误

当我在Chrome中访问所需的资源时，我还会收到以下错误消息：

更新：

现在，我已将webpack-dev-server设置为使用与原始Web服务器（https：// localhost：44369）相同的证书。我已验证两者之间的Thumbprint和Serial number是相同的。

https://webpack.js.org/configuration/dev-server/#devserver-pfx

https: true,
pfx: fs.readFileSync(path.resolve(__dirname, "../Client.WebProxy/App_Data/Certificate/") + '\\localhost.pfx'),
pfxPassphrase: …

有谁知道如何使用cross-env设置多个env变量？我尝试运行以下脚本失败。

"cross-env NODE_ENV=production DTM_ENV=staging webpack --config internals/webpack.prod.babel.js --color -p --progress"

在console.log(process.env)其上仅显示NODE_ENV: "production"。

从git下拉后，我试图在本地运行一个前端项目。之后，我得到以下错误：

vents.js:183
  throw er; // Unhandled 'error' event
  ^

Error: listen EADDRINUSE 127.0.0.1:8081
    at Object._errnoException (util.js:1022:11)
    at _exceptionWithHostPort (util.js:1044:20)
    at Server.setupListenHandle [as _listen2] (net.js:1351:14)
    at listenInCluster (net.js:1392:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1501:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:97:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! apex-library@1.0.24 dev: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the apex-library@1.0.24 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional …

我已经配置了Webpack,具有以下devServer配置:

devServer:{
  port: 8080,
  host: 'localhost',
  publicPath: 'http://localhost:8080/',
  ...
}

我怎么知道开发服务器的根目录在哪里.从webpack 的文档中,有一个设置devServer.contentBase,我的配置中没有这个设置.

devServer.contentBase(布尔字符串数组)

告诉服务器从哪里提供内容.只有在您想要提供静态文件时才需要这样做.devServer.publicPath将用于确定应该从哪个服务器提供服务,并优先使用.

默认情况下,它将使用您当前的工作目录来提供内容,但您可以将其修改为另一个目录:

我只是不明白怎么devServer.publicPath会告诉服务器从哪里提供内容!

[更新]我认为它提供output.pathWebpack中的设置文件.但不确定.

我使用Vue CLI制作了一个简单的Vue应用程序,现在我想在html的头部添加Google Tag Manager代码,仅限于生产版本.我可以使用像php这样的服务器端语言来做这个,所以我尝试将index.html更改为index.php,但是当我构建项目时,它会输出一个index.html注入应用程序,而index.php没有注入应用程序dist文件夹.php代码也不能与vue cli中的webpack-dev-server一起使用.

如何将一些服务器端代码(它不必是php)集成到vue cli生成的vue应用程序的索引中,以有条件地为生成构建添加标记管理器代码？我不确定vue cli构建过程是如何完成的.我可以告诉它使用不同的index.html进行生产构建吗？

额外:我有兴趣了解有关vue cli构建过程的更多信息.恩.模板index.html中没有脚本标记,那么在构建或使用webpack-dev-server时,Vue如何将自身注入索引？

我尝试将webpack-dev-server用作对远程测试服务器的API请求的代理（以免在本地计算机上引发繁重的Java服务器）。问题是远程服务器仅使用HTTPS。由于某种原因，尽管它可以从浏览器正确打开，但它不接受来自webpack-dev-server的证书。

我的package.json部分：

"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.3"

我的webpack.config.json部分：

// -- DEV-SERVER
devServer: {
    contentBase: artifact,
    // publicPath: path.join(artifact, 'build', '/'),
    host: "lk-local.net",
    port: 8443,
    https: {
        key: fs.readFileSync('./src/main/profiles/local/cert/webpack/server.key'),
        cert: fs.readFileSync('./src/main/profiles/local/cert/webpack/server.crt'),
        ca: fs.readFileSync('./src/main/profiles/local/cert/webpack/cacert.crt'),
    },
    historyApiFallback: true,
    hot: true,
    headers: {'Access-Control-Allow-Origin': '*'},
    proxy: {
        '/client-config': 'https://dev-2.MYSERVER.ru/client-config',
        '/client-api/*': 'https://dev-2.MYSERVER.ru/client-api/',
        secure: false,
        changeOrigin: true
    }
}

Webpack-dev-server输出：

webpack: Compiled successfully.
[HPM] Error occurred while trying to proxy request /client-api/checkBrowser from lk-local.net:8443 to https://dev-2.MYSERVER.ru/client-api/ (ERR_TLS_CERT_ALTNAME_INVALID) (https://nodejs.org/api/errors.html#errors_common_system_errors)
[HPM] Error occurred while …