webpack-dev-server远程访问配置方法

下面的package.json文件中配置的webpack-dev-server为开发模式，可以使用http://localhost:8080或http://127.0.0.1:8080进行访问

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules"
 },

当需要远程访问时，需要在package.json中进行修改

"scripts": {
  "dev": "webpack-dev-server --host 10.30.1.102 --devtool eval --progress --colors --hot --content-base build",
  "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules"
 },

此时，可以通过http://192.168.10.8:8080或http://127.0.0.1:8080这种形式进行访问，但是http://localhost:8080无法进行访问。

以上这篇webpack-dev-server远程访问配置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 详解webpack-dev-server使用http-proxy解决跨域问题
  • 深入理解Webpack 中路径的配置
  • webpack常用配置项配置文件介绍
  • vue项目中的webpack-dev-sever配置方法
  • webpack-dev-server自动更新页面方法
赞 (0)

相关推荐

  • webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install w

  • 深入理解Webpack 中路径的配置

    深入理解Webpack 中路径的配置

    前言 Webpack2 中有很多涉及路径参数配置,若不知其所以然,很容易混淆出错.本文尽可能的汇集了 Webpack2 中涉及路径的配置,力争深入浅出. context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找. 默认值为当前目录,webpack设置 context 默认值代码 可以本地下载: this.set("context", process.cwd()); process.cwd()即webpack运行所在的目录(等同pac

  • webpack-dev-server自动更新页面方法

    这两天在看webpack,今天卡在webpack-dev-server上了,折腾了一下午,一直无法正常运行,每次服务器也提示正常启动了,但是浏览器一输入localhose:8080/admin就提示Get/...,反正就是无法打开页面.最后找到一个帖子,发现原来是我启动服务器的代码有问题. 先安装webpack相关组件 cnpm i webpack-dev-server --save-dev cnpm i webpack --save-dev 代码如下: 1.项目结构如下: 2.webpack.

  • vue项目中的webpack-dev-sever配置方法

    问题描述:在vue项目中运行npm run dev启动服务器,然而在同一个局域网下的外部设备不能该服务器 解决方案:在项目的config文件夹下找到index .js中的host把默认的localhost更改为0.0.0.0, 然后外部设备就可以访问该项目启动的服务了(注意必须是在统一局域网下) 以上这篇vue项目中的webpack-dev-sever配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解webpack-dev-server使用http-proxy解决跨域问题

    文档资料 webpack关于webpack-dev-server开启proxy的官方介绍 Vue-cli proxyTable 解决开发环境的跨域问题--虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的 http-proxy-middleware--webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy 在webpack的配置文件(webpack.config.js)中进行配置 module.exports = { ...此处省略

  • 关于Webpack dev server热加载失败的解决方法

    利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

  • webpack-dev-server远程访问配置方法

    下面的package.json文件中配置的webpack-dev-server为开发模式,可以使用http://localhost:8080或http://127.0.0.1:8080进行访问 "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "rimraf dist &

  • Linux下用dnsmasq做dns cache server的配置方法

    目前最新版是2.7.1 ,可去其FTP下载:http://www.thekelleys.org.uk/dnsmasq/ 安装过程比较简单 yum -y install dnsmasq* wget http://www.keepalived.org/software/keepalived-1.2.9.tar.gz tar zxvf keepalived-1.2.9.tar.gz cd keepalived-1.2.9 ./configure --prefix=/usr/local/keepaliv

  • Nagios监控Windows Server 2008配置方法

    Nagios监控Windows Server 2008配置方法

    1.安装NSClient++ 访问http://nsclient.org/nscp/下载NSClient++,这里我使用的是NSClient++-0.3.9-x64的msi安装包.下载之后直接安装,过程中会提示输入Nagios监控服务器地址和密码.地址填写正确,密码不用设置.Nagios监控服务器事先在监控Linux服务器时候已经搭建好,以后再和大家分享.安装如下图所示: 2.配置NSClient++ 编辑安装目录下的NES.ini文件,打开NSClient++的端口.方法为找到:[NSClie

  • Centos 7.3下SQL Server安装配置方法图文教程

    Centos 7.3下SQL Server安装配置方法图文教程

    以后工作都将与Linux打交道,对于.net忠实粉丝现在进入Linux还算幸运,因为.net core和asp.net core都已经跨平台了.今天没事想试试传说中的Linux Sql server是不是上手容易. 安装SQL Server到Centos 7.3 官方文档:https://docs.microsoft.com/en-us/sql/linux/quickstart-install-connect-red-hat OS必须条件: cat /etc/redhat-release 1.设

  • WebsitePanel Standalone Server安装配置方法

    WebsitePanel Standalone Server安装配置方法

    WebsitePanel安装好之后,我们会看到桌面多了一个WebsitePanel Installer,双击这个程序之后看到: 接下来我们只要安装WebsitePanel Standalone Server就可以使用WebsitePanel了.首先我们点击WebsitePanel Standalone Server Setup右边的Install看到: 点击Next看到: 点击I Agree看到: 点击Next看到: 填写相应的服务器IP和主机名(域名最好是有效域名,设置好之后就可以通过域名访问

  • vue2.0在没有dev-server.js下的本地数据配置方法

    vue2.0在没有dev-server.js下的本地数据配置方法

    问题描述: 在vue2.0的以上的版本,vue-cli的build的文件夹下没有dev-server.js文件,那怎么配置mock数据 Vue2.x在build下的webpack.dev.conf.js配置就行 //在const portfinder = require('portfinder')后添加 const express = require('express') // nodejs开发框架express,用来简化操作 const app = express() // 创建node.js

  • 详解node.js中的npm和webpack配置方法

    详解node.js中的npm和webpack配置方法

    概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的

  • 详解vue-cli脚手架中webpack配置方法

    什么是webpack webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript.CSS.图片等文件,webpack就将这些静态资源文件称之为模块 webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的以来关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布,在官网中用这张图片介绍: 它在很多地方都能替代Grunt和Gulp,因为它

  • webpack+vue+express(hot)热启动调试简单配置方法

    前言 最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 webstorm +vue +webpack +express,小项目都是官方down下来的. 目录介绍如下 package { "name": "yx", "version": "1.0.0", "description&quo

随机推荐