webpack-dev-server简记
webpack -v 3.4.1
npm -v 3.10.10
///////////////////////////////////////
webpack的webpack-dev-server可以在本地构建nodejs的express服务器进行本地测试,可以在改动代码后自行刷新页面。昨晚试了下但总是不成功,浏览器打开localhost只显示cannot get xxx。翻了好多帖子和github的issues,英明神武的我竟然花了整整一个晚上才弄明白,羞耻。
1.本地安装了webpack后,安装webpack-dev-server,建立好项目文件树
2.在package.json中配置script项命令:
"build": "webpack --config webpack.config.js --progress --display-reasons --display-error-details --display-modules --color ",
"start":"webpack-dev-server --open"
3.在config.js输出配置对象中设置devServer属性:
{
contentBase:__dirname, //浏览器cwd
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
4.运行webpack
npm run bulid
npm run start
问题一:Cannot get xxx
为了这个问题翻了好多帖子浪费很多时间,主要是国内的很多webpack-dev-server教程都前篇一律,没有提到这个问题,甚至有的连contentBase 参数都没列出来,更没有给出solution;后来去github参考别人的代码,翻文档案例,最后终于弄清楚npm run start后,页面打开的url是以devServer中的contentBase作为当前查询目录,只要文档不在contentBase所指定的目录中,就只会显示cannot get;所以只要文档放在该目录下就能正常工作了。
问题二:
页面webpack-dev-server命令后,没有展示文档,却展示了一个目录视图
这是webpack-dev-server擅自加的,contentBase参数设置不对的话,会展示一个以该参数指定目录作为根目录的路由窗口,类似文件树,contentBase设置到index.html就好了。另外,如果output设置了publicPath,index中js的src也要以publicPath作为路径,不必使用绝对路径。
补充5.由于版本原因,一些参数的有无和设置不同,建议大家在确定自己webpack版本后直接查阅官方文档就好啦。
我的webpack是3.4.1,webpack-dev-server参考文档:https://webpack.js.org/guides/development/#using-webpack-dev-server.
另外推荐简书上一篇很赞的webpack教程:http://www.jianshu.com/p/42e11515c10f
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 ...
随机推荐
- 2019-2020-1 20199328《Linux内核原理与分析》第二周作业
冯诺依曼体系结构的核心是: 冯诺依曼体系结构五大部分:控制器,运算器,存储器,输入输出设备. 常用的寄存器 AX.BX.CX.DX一般存放一些一般的数据,被称为通用寄存器,分别拥有高8位和低8位. 段 ...
- 【Linux网络基础】TCP/IP 协议簇(各个常见协议介绍)
一.应用层协议 1. FTP 协议所在层次:应用层协议 名称:FTP协议 协议端口:20,21 协议说明: FTP(File Transfer Protocol,文件传输协议)是TCP/IP协议组 ...
- 【Linux常见命令】netstat命令
netstat - Print network connections, routing tables, interface statistics, masquerade connections, a ...
- TCP连接过程及报文解析
可能大家都听过TCP建立连接时需要经历三次握手和四次挥手的. 那么具体的握手挥手的过程是怎么样的呢? 这篇文章就通过WireShark抓包来了解TCP连接建立和断开的过程. 实验方法: 写一段简单的代 ...
- golang 线上项目部署折腾之一
最近自己使用golang折腾了一点东西,可是需要部署到线上才好玩,那么服务器使用了aws,然后使用了docker和没有使用docker部署了一次.简单记录一下过程 aws服务器 为什么使用aws呢,说 ...
- Radix_Sort
public class Radix_sort { public static void sort(int[] arrays,int radix){ int n = 1; int length = a ...
- 数学--数论--HDU - 6322 打表找规律
In number theory, Euler's totient function φ(n) counts the positive integers up to a given integer n ...
- ACM卡常处理办法(虽然我到现在没遇到)
今天做预流推送,一样的代码.别人500MS(OI选手)而我5S,百思不得其解,然后我知道了还有卡常这一说. 我们今天就来看一看吧: 1.循环展开: 在缓存和寄存器允许的情况下一条语句内大量的展开运算会 ...
- P3842 [TJOI2007]线段
最近多刷些dp,觉得这个算不上蓝题 在一个\(n\times n\)的平面上,在每一行中有一条线段,第\(i\)行的线段的左端点是\((i, L_i)\),右端点是\((i, R_i)\),其中\ ...
- 在html中使用vue组件
最近在维护公司的项目,当我拿到项目时,发现他用了vue. 但是~~仅仅是引用vue.js文件,整体的架构还是html那种,没有用webpack! 当时觉得~哇~原来还可以这样! 然后了解了业务逻辑和代 ...