官方讲解地址:https://webpack.js.org/guides/development/#using-webpack-dev-server

The webpack-dev-server provides you with a simple web server and the ability to use live reloading. Let's set it up:

功能:开启一个web服务器,方便使用ajax请求,同时能够实现热更新。

1.安装webpack-dev-server

npm install --save-dev webpack-dev-server

2.修改webpack.config.js. 添加devServer: { .....}

module.exports = {
devServer: {
contentBase: './dist'
}
}

contentBase: './dist'  是指在webpack.config.js同级目录下的dist目录下开启一个web服务器

3.修改package.json 添加"scripts": { "start": "webpack-dev-server"}

"scripts": {
"start": "webpack-dev-server"
}

4.运行npm start 开启服务

npm start

5.打开浏览器

输入:http://localhost:8080

拓展:

A.自动打开浏览器

// 如果想执行 npm start 后自动打开浏览器,有以下方案可供选择
// 1.在package.json文件中,添加 --open
"scripts": {
  "start": "webpack-dev-server --open"
 }

// 2.在webpack.config.js 的devServer下, 添加 open: true
  devServer: {
    contentBase: './dist',
    open: true
  }

B.接口代理

// 当访问 /api 这个路径时会自动转发到 http://localhost:8080 
// 因为vue的脚手架用到了webpack 所以也是使用这个实现接口代理的。 module.exports = {
//...
devServer: {
port: 8080,
proxy: {
'/api': 'http://localhost:3000'
}
}
};
更多拓展请移步:https://webpack.js.org/configuration/dev-server/

Using webpack-dev-server的更多相关文章

  1. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  2. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

  3. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  4. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  5. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  6. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  7. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  8. vue-cli脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  9. Vue.js如何搭建本地dev server和json-server 模拟请求服务器

    前言:vue-cli(版本更新),由原来的2.8.1升级为2.9.1.主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js. 所以这次讲的 ...

  10. npm ERR! mathine_call@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1

    internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module 'webpack' at Function.Modu ...

随机推荐

  1. SpringBoot启动后自动打开浏览器访问项目

    之前我们用SSM或者SSH进行JAVA WEB开发的时候,IDEA 需要配置Tomcat然后把项目放到tomcat运行,tomcat启动的时候会自动打开浏览器去访问项目,但是SpringBoot是内嵌 ...

  2. cordova将vue项目打包成apk

    1,若vue项目不在cordova项目里,直接把它复制进来,避免改动代码的麻烦 2,直接按照以下链接进行操作即可 链接:https://www.cnblogs.com/qirui/p/8421372. ...

  3. Airflow 操作知识总结(完善中)

    airflow默认以utc时区运行,如果需要计算正确的时间,需要把时间进行时区转换,核心代码如下 #将本地时间转换为utc时间,再设置为start_date tz = pytz.timezone('A ...

  4. lc 0227

    目录 ✅ 1189. "气球" 的最大数量 描述 解答 cpp py improved py ✅ 784. 字母大小写全排列 描述 解答 c: backTrace !! power ...

  5. 前端框架vue学习笔记:环境搭建

    兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...

  6. 2 数据结构的性能分析 timeit

    # python数据结构的性能分析 https://www.cnblogs.com/bobo-zhang/p/10521769.html from timeit import Timer #计算运行平 ...

  7. 基于SILVACO ATLAS的a-IGZO薄膜晶体管二维器件仿真(06)

    在知网看到了江南大学的硕士论文: 双有源层a-IGZO薄膜晶体管的特性仿真 IGZO/IZO双有源层薄膜晶体管特性的模拟研究 发现,我昨天的文章中参数的设置存在重大失误,如下材料定义语句中: mate ...

  8. webservice笔记

    Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...

  9. SpringCloud全家桶学习之消息总线---SpringCloud Bus

    一.概述 ConfigClient(微服务)从ConfigServer端获取自己对应的配置文件,但是目前的问题是:当远程git仓库配置文件发生改变时,每次都是需要重启ConfigCient(微服务), ...

  10. UIImageView的API

    - (instancetype)initWithImage:(UIImage *)image; 返回使用指定图像初始化的图像视图. - (instancetype)initWithImage:(UII ...