Using webpack-dev-server
官方讲解地址: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.打开浏览器
拓展:
A.自动打开浏览器
// 如果想执行 npm start 后自动打开浏览器,有以下方案可供选择
// 1.在package.json文件中,添加 --open
"scripts": {
"start": "webpack-dev-server --open"
} // 2.在webpack.config.js 的devServer下, 添加 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的更多相关文章
- 笔记:配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- [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 ...
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...
- webpack 4 & dev server
webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...
- vue-cli脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
- Vue.js如何搭建本地dev server和json-server 模拟请求服务器
前言:vue-cli(版本更新),由原来的2.8.1升级为2.9.1.主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js. 所以这次讲的 ...
- 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 ...
随机推荐
- flex一行显示两列(CSS)
外层display: flex;flex-wrap: wrap; 里层 width:49%
- 吴裕雄 python 机器学习——数据预处理流水线Pipeline模型
from sklearn.svm import LinearSVC from sklearn.pipeline import Pipeline from sklearn import neighbor ...
- python 读取一个文件夹下的所jpg文件保存到txt中
最近需要使用统计一个目录下的所有文件,使用python比较方便,就整理了一下代码. import os def gci(filepath): files = os.listdir(filepath) ...
- 360安全浏览器已经完成和统一操作系统UOS的适配工作
导读 统信软件公司宣布,360安全浏览器已经完成和统一操作系统UOS的适配工作.如今,基于龙芯.兆芯.飞腾.海光等国产CPU的统一操作系统UOS,赢全面支持电子公文.电子签章.流版式办公插件等近百款国 ...
- Spring Security教程(二):自定义数据库查询
Spring Security教程(二):自定义数据库查询 Spring Security自带的默认数据库存储用户和权限的数据,但是Spring Security默认提供的表结构太过简单了,其实就 ...
- 使用Kubespray在ubuntu上自动部署K8s1.9.0集群
Kubespray 是 Kubernetes incubator 中的项目,目标是提供 Production Ready Kubernetes 部署方案,该项目基础是通过 Ansible Playbo ...
- Golang核心编程
源码地址: https://github.com/mikeygithub/GoCode 第1章 1Golang 的学习方向 Go 语言,我们可以简单的写成 Golang 1.2Golang 的应用领域 ...
- keytool生成keystore
在密钥库中生成本地数字证书:需要提供身份.加密算法.有效期等信息:keytool指令如下,产生的本地证书后缀名为:*.keystore keytool -genkeypair -keyalg RSA ...
- jmeter录制浏览器Https请求
Jmeter录制脚本时,跟http脚本录制主要区别是,https录制需要添加安全证书. 那么在jmeter上如何操作呢?且看下面的操作步骤 一.jmeter的代理服务器及证书配置 1.打开jmeter ...
- 吴裕雄--天生自然TensorFlow2教程:链式法则
import tensorflow as tf x = tf.constant(1.) w1 = tf.constant(2.) b1 = tf.constant(1.) w2 = tf.consta ...