1.安装　

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

　　ps:为保证webpack-dev-server能正常运行，请确认在本地项目中下载了webpack的包，可以通过package.json来查看有无下载

　　2.运行

　　1.使用npx命令运行

npx webpack-dev-server

　　2.使用npm运行

　　　　1.首先配置package.json

//在script内新增dev键

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack",

    "dev":"webpack-dev-server --open --contentBase dist --hot"

  },

//参数说明

/*

   --open 执行命令时自动打开页面

   --contentBase dir 打开时显示的文件

   --hot    每次更新资源文件，不用更新所有资源，只更新部分，相当于加了一个补丁。

*/

　　　　2.运行命令

npm run dev

　　3.修改引用包文件的页面文件（*.html）

<!doctype html>

<html>

  <head>

    <title>起步</title>

  </head>

  <body>

    <!-- 这里的路径要修改成根目录下，因为webpack-dev-server会生成一个虚拟的的包文件，位于根目录下 -->

    <script src="/bundle.js"></script>

  </body>

</html>

　　　　

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. [C++] namespace命名空间和using用法

    命名空间namespace:指标识符的各种可见范围. C++标准程序库中的所有标识符都被定义在一个std的namespace,这就是程序开始添加 using namespace std; 的原因. 很 ...

  2. NFV实验平台

    NFV架构如下图所示. NFVI对应于数据平面,数据平面转发数据并提供用于运行网络服务的资源. MANO对应于控制平面,该控制平面负责构建各种VNF之间的连接以及编排NFVI中的资源. VNF层对应于 ...

  3. MongoDB笔记: 常见问题

    系统配置 设置ulimit MongoDB的文件机制 每个Collection会单独创建一个数据文件(collection-xxxxxx.wt) 每个索引会单独创建一个文件(index-xxxxxx. ...

  4. Android 加密之文件级加密(CE/DE)

    https://blog.csdn.net/myfriend0/article/details/77094890/   Android加密之文件级加密

  5. Linux服务器连接不上的几种解决办法

    Linux远程服务器连接不上,或连接超时解决办法:1.测试网络是否通:    ping 远程IP 2.如果能ping通则表示与服务器网络连接是正常,接下来测试端口:telnet 远程ip 端口 3.如 ...

  6. Spring cloud微服务安全实战-7-11PinPoint+SpringBoot环境搭建

    微服务的最后一个组件, 调用链监控,一个请求进来以后,经过N多个微服务,例如a调用了b.b又调用了c,那么在这个过程中看到,整个的调用的链路,然后每一段调用所耗费的时间,帮你去分析你的系统如果出现瓶颈 ...

  7. JavaXXX成长直通车_汇总

    学习开始于2019-12-08 阶段一 阶段一-01.万丈高楼,地基首要-第1章 学习指南-1-1 课程导学 1-2是图片 阶段一-01.万丈高楼,地基首要-第1章 学习指南-1-3 大型网站架构演变 ...

  8. OpenGL基础汇总

    OpenGL(应用程序接口 即API)——用于访问图形硬件的可编程特性 1. 各种矩阵: 世界矩阵(World Matrix):世界矩阵确定一个统一的世界坐标,用于组织独立的物体形成一个完整的场景; ...

  9. k8s添加凭证

    请参照:https://www.cnblogs.com/effortsing/p/10013441.html

  10. Linux安全学习

    安全游戏说明 游戏形式帮助初学者学习和实践网络安全,主要是Linux shell命令的练习. https://overthewire.org/wargames/ 二进制 灰帽黑客进阶秘籍之一--lin ...