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. SpringCloud Feign通过FallbackFactory显示异常信息

    SpringCloud Feign可以进行服务消费,而且内置了Hystrix,能够进行熔断. Feign可以通过fallback指定熔断回调的类.代码示例及讲解可见: https://www.cnbl ...

  2. Ubuntu 16.04与Win10双系统双硬盘安装图解

    一.先做准备工作.建议:在当前系统所在的硬盘上,留一片空的主分区安装Ubuntu系统. 2.划分多大的空间够?安装的过程中需要涉及到分区,为了以免日后重装,我的建议是如下分区:1).5G,主分区,空间 ...

  3. [E2E_L8_1]segmentation_demo道路分割例子和GOMFCTemplate的初步融合

    一.来源 模型例子自己带来副图像     二.简化   #include <algorithm> #include <fstream> #include <iomanip ...

  4. 013-centos7 常用命令--查看当前用户的4种方法

    一.概述 4种查看系统用户信息(通过编号(ID))的方法. 1.1. 使用w命令查看登录用户正在使用的进程信息 w命令用于显示已经登录系统的用户的名称,以及他们正在做的事.该命令所使用的信息来源于/v ...

  5. Word模板生成PDF文件目录出现“错误！未定义书签！”的解决办法

    通过程序读取Word文档模板生成PDF时,所有目录的页码全部变为“错误!未定义书签!”,后来经过仔细研究,发现是“域”的问题. 解决办法:全选(Crtl+A),按下Crtl+F11,再打印或者另存为P ...

  6. 初识HDFS（10分钟了解HDFS、NameNode和DataNode）

    概览 首先我们来认识一下HDFS, HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.它其实是将一个大文件分成若干块保存在不同服务器的多个节点中.通 ...

  7. notepad++删除某关键字所在的行内容

    例如,我要删除zhao这个字符串所在的行 打开notepad++的ctrl+f窗口 点击替换选项,在查找目标输入^.*bp.*$ 其中替换为那里留空,查找模式选择正则表达式,建议也勾选匹配大小写,同时 ...

  8. [LeetCode] 249. Group Shifted Strings 分组偏移字符串

    Given a string, we can "shift" each of its letter to its successive letter, for example: & ...

  9. [LeetCode] 583. Delete Operation for Two Strings 两个字符串的删除操作

    Given two words word1 and word2, find the minimum number of steps required to make word1 and word2 t ...

  10. kubernetes-subpath用法（把文件挂载在已存在的目录下，不覆盖原目录）

    以ngxin的配置文件为例子: nginx-deployment.yaml : apiVersion: v1 kind: ConfigMap metadata: name: nginx-cm data ...