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. 【软工实践】Beta版本演示

    团队信息 队名:女生都队 组长博客: 博客链接 成员 学号 史恩泽(组长) 031702122 施金海 031702121 阮君曦 031702116 陈银山 031702137 李季城 031702 ...

  2. Python Selenium Webdriver常用方法总结

    Python Selenium Webdriver常用方法总结 常用方法函数 加载浏览器驱动: webdriver.Firefox() 打开页面:get() 关闭浏览器:quit() 最大化窗口: m ...

  3. 三层架构BLL＋DAL＋Model & MVC & MVVM

    三层架构 - 国内版 Binghttps://cn.bing.com/search?FORM=U227DF&PC=U227&q=%E4%B8%89%E5%B1%82%E6%9E%B6% ...

  4. ISO/IEC 9899:2011 条款6——语言

    6 语言 6.1 标记法 1.在本条款中所使用的语法标记法.语义类别(非终结符)用斜体字指示,而字面量单词以及字符集成员(终结符)用粗体字指示.跟在一个非终结符后面的冒号(:)引出其定义.在单独的行中 ...

  5. aardio 文档

    aardio 文档 根据官方帮助手册制作了一份文档,添加了一些特性. 支持手机阅读 不用电脑也可以学习 aau 了,不受屏幕大小限制,你的小清新还是你的小清新~ 简单的搜索功能 快捷复制示例代码 基于 ...

  6. Spring MVC -- Spring MVC入门

    本篇博客首先介绍Spring MVC的优点,然后介绍Spring MVC的基本组件,包括DispatcherServlet,并学习如何开发一个“传统风格”的控制器,这是在Spring 2.5版本之前开 ...

  7. [LeetCode] 250. Count Univalue Subtrees 计算唯一值子树的个数

    Given a binary tree, count the number of uni-value subtrees. A Uni-value subtree means all nodes of ...

  8. NB-IOT技术学习问题记录

    1. TAU是什么,跟踪区更新 2. 小区和基站的区别 3. 附着和设备注册的关系? 4. 不携带PDN是什么意思? 5. PLMN 公共陆地移动网络,和小区的关系,区别?

  9. GitLab - GitLab的备份与还原

    1 - GitLab配置文件 GitLab默认的配置文件路径:/etc/gitlab/ /etc/gitlab/gitlab.rb:主配置文件,包含外部URL.仓库目录.备份目录等 /etc/gitl ...

  10. Unreal Engine 4 中的 UI 优化技巧

    转自:https://mp.weixin.qq.com/s/bybEHM9tF-jBPxxqXfrPOQ## Unreal Open Day 2017 活动上 Epic Games 开发者支持工程师郭 ...