第四十八篇: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相结合的方式 ...
随机推荐
- 【小程序自动化Minium】一、框架介绍和环境搭建
微信小程序自动化测试系列分享 一.Minium 简介 minium 是微信团队为小程序专门开发的自动化框架,我们可以用它来做小程序的UI自动化测试,但是它的能力却不仅仅在于UI自动化. 正是得益于官方 ...
- 基于slate构建文档编辑器
基于slate构建文档编辑器 slate.js是一个完全可定制的框架,用于构建富文本编辑器,在这里我们使用slate.js构建专注于文档编辑的富文本编辑器. 描述 Github | Editor DE ...
- Node.js精进(5)——HTTP
HTTP(HyperText Transfer Protocol)即超文本传输协议,是一种获取网络资源(例如图像.HTML文档)的应用层协议,它是互联网数据通信的基础,由请求和响应构成. 在 Node ...
- 周报?谁还写周报啊?不都用Python小工具: 发个周报邮件给老板就行还写周报啊?不都用Python小工具: 发个周报邮件给老板就行
缘起: 新跳槽到一家公司, 没想到第一个挑战居然是每周都要发周报. 告诉老板这周都干了些什么和下周准备干什么. 我记性不好, 常常忘事儿.所以很多时候周报都会忘记发送. 于是, 就决定写一个小工具好了 ...
- 毕设必看——Python ttkbootstrap 制作账户注册信息界面
先来哔哔两句:(https://jq.qq.com/?_wv=1027&k=QgGWqAVF) ttkbootstrap 是一个基于 tkinter 的界面美化库,使用这个工具可以开发出类似前 ...
- 抓包整理外篇fiddler———— 会话栏与过滤器[二]
前言 简单介绍一下会话栏和过滤器 正文 在抓包的时候这两个可以说是必用吧. 会话栏: 会话栏我这里介绍根据左边部分和右边部分. 左边部分是一些图标,有些人发现有个习惯,不习惯看图标. 其实说白了,我们 ...
- SLF4J 日志门面
目录 01.简单介绍 02.日志级别 03.入门案例 03.动态打印 04.异常打印 05.日志集成 06.集成 logback 07.集成 slf4j-nop 08.集成 log4j 09.集成 j ...
- vivado没用上的寄存器变量
vivado中定义了但没用上的寄存器变量,在综合时会被移除,即没有综合出来.(如下cnt,虽然在y的过程块中用了cnt作为判断条件,但实际上cnt用了跟没用效果一样,所以综合时cnt_reg就被放弃了 ...
- Deployment之滚动更新策略。
1.Deployment控制器详细信息中包含了其更新策略的相关配置.kubectl describe命令中输出的StrategyType.RollingUpdateStrategy字段等: root@ ...
- linux 编译式安装nginx
./configure --prefix=/usr/local/nginx --sbin-path=/usr/local/nginx/sbin/nginx --conf-path=/usr/local ...