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 ...
随机推荐
- 6_10 下落的树叶(UVa699)<二叉树的DFS>
每年到了秋天树叶渐渐染上鲜艳的颜色,接着就会落到树下来.假如落叶发生在二叉树,那会形成多大的树叶堆呢?我们假设二叉树中的每个节点所落下的叶子的数目等于该节点所储存的值.我们也假设叶子都是垂直落到地面上 ...
- 微信小程序解析HTML标签带有<p>
小程序中默认是不支持html格式没有<p>标签,但是有些接口需要返回带有标签的,例如 : 隐私协议: 解决方法: 小程序中有一个富文本标签组件,前端可以解析H5标签就是 rich-text ...
- 微信-获取openid
第一步 首先把微信的支付流程与相关的文档熟悉一遍,具体的支付逻辑是怎么实现的,心里要有一定的路数,开发的时候一边看文档,一边写,再一边调试这是最好的选择,首先阅读微信开发文档,因为我们这次是做公众号支 ...
- rsyslog日志服务部署
rsyslog简介 rsyslog是CentOS6和CentOS7默认的记录日志的服务 支持特性: UDP, TCP, SSL, TLS, RELP MySQL, PGSQL, Oracle实现日志存 ...
- 排序算法之选择排序的python实现
选择排序算法的工作原理如下: 1. 首先在序列中找到最小或最大元素,存放到排序序列的前或后. 2. 然后,再从剩余元素中继续寻找最小或最大元素. 3. 然后放到已排序序列的末尾. 4. 以此类推,直到 ...
- java月利率计算(等额本息贷款)
等额本息 每月还款计算公式: 每月本息金额 = (本金×月利率×(1+月利率)^还款月数)÷ ((1+月利率)^还款月数-1)) 反转求出 月利率 月利率 如果根据上面公式反转是算不出来的. 下面给出 ...
- 吴裕雄 python 神经网络——TensorFlow训练神经网络:不使用隐藏层
import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data INPUT_NODE = 784 ...
- Java面向对象编程 -1.6
引用传递与垃圾产生分析 经过了一系列的分析之后已经确认,所有的引用传递的本质就是一场堆内存的调戏游戏.如果对于引用传递如果处理不当那么也会造成垃圾的产生, 那么本次将针对于垃圾产生的原因进行简单分析. ...
- codeforces- Shortest path of the king
The king is left alone on the chessboard. In spite of this loneliness, he doesn't lose heart, becaus ...
- sparksql报错
执行时报错: org.apache.spark.sql.AnalysisException: Unable to generate an encoder for inner class `cn.itc ...