实现自动打包自动刷新浏览器

新建目录和页面看图

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装后生成这两个文件

加上配置项

配置配置文件

var htmlwp = require('html‐webpack‐plugin');

module.exports={

entry:'./src/main.js', //指定打包的入口文件

output:{

path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径

filename:'build.js' //输出文件

},

plugins:[

new htmlwp({

title: '首页', //生成的页面标题<head><title>首页</title></head>

filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这

个页面底部，才能实现自动刷新功能

template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)

})

]

}


鼠标右键


运行dev。自动打开页面


查看源代码 ，自动把build.js加进来的

实际上执行的就是npm run dev。我们进入到这个目录里面查看运行命令。

阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_14-webpack研究-webpack-dev-server的更多相关文章

  1. 微服务项目开发学成在线_day02 CMS前端开发

    1 Vue.js与Webpack研究 开发版的浏览器:https://www.google.cn/intl/zh-CN/chrome/dev/ 前端的开发框架:微服务项目开发学成在线_Vue.js与W ...

  2. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作

    这是轮播图的原始文件 运行门户需要把 nginx启动起来 单独运行轮播图.把里面的css的引用都加上网址的url 这就是单独访问到的轮播图的效果 轮播图模板的地址: 阶段5 3.微服务项目[学成在线] ...

  3. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_03-用户认证技术方案-Oauth2协议

    2.2 Oauth2认证 2.2.1 Oauth2认证流程 第三方认证技术方案最主要是解决认证协议的通用标准 问题,因为要实现 跨系统认证,各系统之间要遵循一定的 接口协议. OAUTH协议为用户资源 ...

  5. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析

    1.1 用户认证与授权 截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程 呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...

  6. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_05-Feign远程调用-客户端负载均衡介绍

    2 Feign远程调用 在前后端分离架构中,服务层被拆分成了很多的微服务,服务与服务之间难免发生交互,比如:课程发布需要调用 CMS服务生成课程静态化页面,本节研究微服务远程调用所使用的技术. 下图是 ...

  7. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_02-Eureka注册中心-搭建Eureka单机环境

    我们先搭建单机环境 govern是治理的意思, 这样就把工程创建好了 创建包 创建SpringBoot的启动类. 在父工程里面已经确定了Spring Cloud的版本了.相当于锁定了版本 接下里只需要 ...

  8. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_04-Eureka注册中心-将服务注册到Eureka Server

    cms相当于客户端 配置客户端的信息 后面加逗号分隔开 50102表示向两台eureka服务上报服务,如果有一台死掉了 那么还可以上另外的一台去注册服务 直接把ip注册到eureka 启动类加注解 重 ...

  9. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_01-Eureka注册中心-Eureka介绍

    1 Eureka注册中心 1.1 需求分析 在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...

  10. 阶段5 3.微服务项目【学成在线】_day18 用户授权_03-方法授权-jwt令牌包含权限

    修改认证服务的UserDetailServiceImpl类,下边的代码中 permissionList列表中存放了用户的权限, 并且将权限标识按照中间使用逗号分隔的语法组成一个字符串,最终提供给Spr ...

随机推荐

  1. layer学习

    layer版本v2.1 1,layer的alert可以传标题的: layer.alert("测试layer弹窗===========", {title:"温馨提示&quo ...

  2. Netty搭建WebSocket服务端

    Netty服务端 1.引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...

  3. JSP网页中文乱码

    在编程过程中总是由于各种原因出现中文乱码.最好的解决方法就是把代码中所有编码格式全部设置为UTF-8,这样一般能解决大部分问题,但是今天我发现另外一种情况.我们都知道当一个jsp文件中全部都是html ...

  4. 一步步来用C语言来写python扩展

    本文介绍如何用 C 语言来扩展 python.所举的例子是,为 python 添加一个设置字符串到 windows 的剪切板(Clipboard)的功能.我在写... 本文介绍如何用 C 语言来扩展 ...

  5. Windows10关闭自动更新总结

    试过好多关闭windows自动更新的方法,但是在每次重启后发现C盘又塞了一堆更新包,强迫症的我必须要彻底关闭它! 1. services关闭 运行 services.msc ,找到Windows Up ...

  6. 配置IIS使其支持APK文件的下载

    在管理工具里打开Internet 信息服务(IIS)管理器.然后选择需要配置的网站. 右侧的界面中会显示该网站的所有功能配置,我们选择并点击进入“MIME类型”   在左侧的操作区选择点击“添加”MI ...

  7. spring+mybatis所需各种服务的搭建

    1.mysql5.6 2.jdk1.7 3.zookeeper 4.dubbo-admin 5.activtymq 6.maven 7.nexus 8.mybatis脚本文件生成工具使用

  8. Educational Codeforces Round 40 (Rated for Div. 2) 954G G. Castle Defense

    题 OvO http://codeforces.com/contest/954/problem/G 解 二分答案, 对于每个二分的答案值 ANS,判断这个答案是否可行. 记 s 数组为题目中描述的 a ...

  9. 边学边体验django

    django菜鸟入门连接:http://www.runoob.com/django/django-template.html 安装以及Demo里面都有. 我边学边在电脑上演示,然后发现一些和实际不一样 ...

  10. SIGAI深度学习第二集 人工神经网络1

    讲授神经网络的思想起源.神经元原理.神经网络的结构和本质.正向传播算法.链式求导及反向传播算法.神经网络怎么用于实际问题等 课程大纲: 神经网络的思想起源 神经元的原理 神经网络结构 正向传播算法 怎 ...