第四十八篇:webpack的基本使用(二) --安装和配置webpack-dev-server插件
好家伙,
1.webpack中的默认约定
默认的打包入口文件为src -->index.js
默认的输出文件路径为dist -->main.js
既然有默认,那么就说明肯定能改
2.entry和output
在webpack.config.js配置文件中,
通过entry节点指定打包的入口。
通过output节点指定打包的出口。
示例代码如下:
const path = require('path')// 导入 node.js 中专门操作路径的模块,这里的path是node的一个模块 module.exports ={
entry: path.join(_dirname, './src/index.js'),// 打包入口文件的路径 output:{ path: path.join(_dirname, './dist'), // 输出文件的存放路径,这里的path是一个属性 filename: 'bundle.js'//输出文件的名称
}
}
3.webpack 插件安装
现在问题来了
如果我要改index.js中的内容(就算只是改一两行代码),也必须改完内容后保存,再打包,
多次更改下来,显得整个过程显得非常繁琐
有没有什么好的解决办法?
使用webpack插件
3.1.安装方法:
终端跑一下啦:
npm install webpack-dev-server@3.11.2 -D
3.2.webpack 插件的作用
通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来更方便。
3.3.最常用的webpack插件有如下两个:
① webpack-dev-servert
类似于node.js 阶段用到的 nodemon 工具
每当修改了源代码,webpack会自动进行项目的打包和构建
② html-webpack-plugin
webpack中的HTML插件(类似于一个模板引擎插件)
可以通过此插件自定制 index.html页面的内容
4.配置webpack-dev-server
① 修改 package.json->scripts 中的dev 命令,如下:
"scripts": {
"dev": "webpack serve", // script 节点下的脚本,可以通过 npm run 执行
}
②再次运行npm run dev 命令,重新进行项目的打包
③在浏览器中访问 http://localhost:8080地址,查看自动打包效果
(出现了!!出现了!!是"http://localhost:8080"!!!)
注意:webpack-dev-server 会启动一个实时打包的 http 服务器
(像之前写vue项目一样,ctrl+s一次他就更新一次,终端处于监视的状态,监视代码的更新)
于是就解决每次修改代码都需要重新打包的问题了
That's all
溜了溜了
"黑马程序员"NB
第四十八篇:webpack的基本使用(二) --安装和配置webpack-dev-server插件的更多相关文章
- 第四十七篇:webpack的基本使用(一) --安装和配置webpack
好家伙, 1.webpack的基本使用 写个例子:实现一个奇偶行变色列表 步骤如下: ① 新建项目空白目录,并运行 npm init-y命令,初始化包管理配置文件 package.json② 新建sr ...
- C++第四十八篇 -- 字符串分离方法
举例:Test_Bluetooth.exe -param_split Test_Bluetooth.cpp #include "pch.h" #include <iostre ...
- Python开发【第十八篇】:MySQL(二)
视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...
- hihoCoder hiho一下 第四十八周 题目1 : 拓扑排序·二
题意: 给定一个拓扑图,其中部分结点含有1个病毒,每个结点只要收到病毒就会立即往出边所能到达的点传播,病毒数可叠加,求所有结点的病毒数总和. 思路: 根据拓扑的特点,每个入度为0的点肯定不会再被传播病 ...
- 第十八篇 Linux环境下常用软件安装和使用指南
提醒:如果之后要安装virtualenvwrapper的话,可以直接跳到安装virtualenvwrapper的方法,而不需要先安装好virtualenv 安装virtualenv和生 ...
- 《手把手教你》系列技巧篇(四十八)-java+ selenium自动化测试-判断元素是否可操作(详解教程)
1.简介 webdriver有三种判断元素状态的方法,分别是isEnabled,isSelected 和 isDisplayed,其中isSelected在前面的内容中已经简单的介绍了,isSelec ...
- Python之路【第十八篇】:Web框架们
Python之路[第十八篇]:Web框架们 Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...
- NeHe OpenGL教程 第四十八课:轨迹球
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- SQL注入之Sqli-labs系列第四十七关,第四十八关,第四十九关(ORDER BY注入)
0x1 源码区别点 将id变为字符型:$sql = "SELECT * FROM users ORDER BY '$id'"; 0x2实例测试 (1)and rand相结合的方式 ...
随机推荐
- Windows-VS2017创建.NET项目
首先新建->项目 选择如下, 注意要选择.NET Framework4.x 选择对应的项目类型 建议选上Web窗体(如果是用于实验的话) 完成后进行测试 如果出现 HTTP Error 403. ...
- python小题目练习(五)
题目:Python实现快速排序 代码实现: """Author:mllContent:Python实现快速排序Date:2020-11-05""&qu ...
- C#生成putty格式的ppk文件(支持passphrase)
背景 2022国家级护网行动即将开启,根据阿里云给出的安全建议,需要将登陆Linux的方式改为密钥对方式.我这里使用的远程工具是自己开发的,能够同时管理Windows和Linux,但是以前不支持密钥对 ...
- gslb(global server load balance)技术的一点理解
gslb(global server load balance)技术的一点理解 前言 对于比较大的互联网公司来说,用户可能遍及海内外,此时,为了提升用户体验,公司一般会在离用户较近的地方建立机房,来服 ...
- .Net之延迟队列
介绍 具有队列的特性,再给它附加一个延迟消费队列消息的功能,也就是说可以指定队列中的消息在哪个时间点被消费. 使用场景 延时队列在项目中的应用还是比较多的,尤其像电商类平台: 订单成功后,在30分钟内 ...
- 神经网络可视化《Grad-CAM:Visual Explanations from Deep Networks via Gradient-based Localization》
神经网络已经在很多场景下表现出了很好的识别能力,但是缺乏解释性一直所为人诟病.<Grad-CAM:Visual Explanations from Deep Networks via Gradi ...
- Tapdata 的 2.0 版 ,开源的 Live Data Platform 现已发布
https://www.bilibili.com/video/BV1tT411g7PA/?aid=470724972&cid=766317673&page=1 点击上方链接,一分钟快速 ...
- thymeleaf实现前后端数据交换
1.前端传数据后端接收: 用户在登录界面输入用户名和密码传给后端controller,由后端判断是否正确! 在html界面中要传递的数据name命名,通过表单的提交按钮会传递给响应的controlle ...
- Drone-比Jenkins更轻量化的持续集成部署工具
Drone 简介 Drone 是一个基于Docker容器技术的可扩展的持续集成引擎,由GO语言编写,可用于自动化测试与构建,甚至发布.每个构建都在一个临时的Docker容器中执行,使开发人员能够完全控 ...
- SQL Server 中的 ACID 属性
SQL Server 中的事务是什么? SQL Server 中的事务是一组被视为一个单元的 SQL 语句,它们按照"做所有事或不做任何事"的原则执行,成功的事务必须通过 ACID ...