好家伙,

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插件的更多相关文章

  1. 第四十七篇:webpack的基本使用(一) --安装和配置webpack

    好家伙, 1.webpack的基本使用 写个例子:实现一个奇偶行变色列表 步骤如下: ① 新建项目空白目录,并运行 npm init-y命令,初始化包管理配置文件 package.json② 新建sr ...

  2. C++第四十八篇 -- 字符串分离方法

    举例:Test_Bluetooth.exe -param_split Test_Bluetooth.cpp #include "pch.h" #include <iostre ...

  3. Python开发【第十八篇】:MySQL(二)

    视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...

  4. hihoCoder hiho一下 第四十八周 题目1 : 拓扑排序·二

    题意: 给定一个拓扑图,其中部分结点含有1个病毒,每个结点只要收到病毒就会立即往出边所能到达的点传播,病毒数可叠加,求所有结点的病毒数总和. 思路: 根据拓扑的特点,每个入度为0的点肯定不会再被传播病 ...

  5. 第十八篇 Linux环境下常用软件安装和使用指南

          提醒:如果之后要安装virtualenvwrapper的话,可以直接跳到安装virtualenvwrapper的方法,而不需要先安装好virtualenv   安装virtualenv和生 ...

  6. 《手把手教你》系列技巧篇(四十八)-java+ selenium自动化测试-判断元素是否可操作(详解教程)

    1.简介 webdriver有三种判断元素状态的方法,分别是isEnabled,isSelected 和 isDisplayed,其中isSelected在前面的内容中已经简单的介绍了,isSelec ...

  7. Python之路【第十八篇】:Web框架们

    Python之路[第十八篇]:Web框架们   Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...

  8. NeHe OpenGL教程 第四十八课:轨迹球

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  9. SQL注入之Sqli-labs系列第四十七关,第四十八关,第四十九关(ORDER BY注入)

    0x1 源码区别点 将id变为字符型:$sql = "SELECT * FROM users ORDER BY '$id'"; 0x2实例测试 (1)and rand相结合的方式 ...

随机推荐

  1. 【小程序自动化Minium】一、框架介绍和环境搭建

    微信小程序自动化测试系列分享 一.Minium 简介 minium 是微信团队为小程序专门开发的自动化框架,我们可以用它来做小程序的UI自动化测试,但是它的能力却不仅仅在于UI自动化. 正是得益于官方 ...

  2. 基于slate构建文档编辑器

    基于slate构建文档编辑器 slate.js是一个完全可定制的框架,用于构建富文本编辑器,在这里我们使用slate.js构建专注于文档编辑的富文本编辑器. 描述 Github | Editor DE ...

  3. Node.js精进(5)——HTTP

    HTTP(HyperText Transfer Protocol)即超文本传输协议,是一种获取网络资源(例如图像.HTML文档)的应用层协议,它是互联网数据通信的基础,由请求和响应构成. 在 Node ...

  4. 周报?谁还写周报啊?不都用Python小工具: 发个周报邮件给老板就行还写周报啊?不都用Python小工具: 发个周报邮件给老板就行

    缘起: 新跳槽到一家公司, 没想到第一个挑战居然是每周都要发周报. 告诉老板这周都干了些什么和下周准备干什么. 我记性不好, 常常忘事儿.所以很多时候周报都会忘记发送. 于是, 就决定写一个小工具好了 ...

  5. 毕设必看——Python ttkbootstrap 制作账户注册信息界面

    先来哔哔两句:(https://jq.qq.com/?_wv=1027&k=QgGWqAVF) ttkbootstrap 是一个基于 tkinter 的界面美化库,使用这个工具可以开发出类似前 ...

  6. 抓包整理外篇fiddler———— 会话栏与过滤器[二]

    前言 简单介绍一下会话栏和过滤器 正文 在抓包的时候这两个可以说是必用吧. 会话栏: 会话栏我这里介绍根据左边部分和右边部分. 左边部分是一些图标,有些人发现有个习惯,不习惯看图标. 其实说白了,我们 ...

  7. SLF4J 日志门面

    目录 01.简单介绍 02.日志级别 03.入门案例 03.动态打印 04.异常打印 05.日志集成 06.集成 logback 07.集成 slf4j-nop 08.集成 log4j 09.集成 j ...

  8. vivado没用上的寄存器变量

    vivado中定义了但没用上的寄存器变量,在综合时会被移除,即没有综合出来.(如下cnt,虽然在y的过程块中用了cnt作为判断条件,但实际上cnt用了跟没用效果一样,所以综合时cnt_reg就被放弃了 ...

  9. Deployment之滚动更新策略。

    1.Deployment控制器详细信息中包含了其更新策略的相关配置.kubectl describe命令中输出的StrategyType.RollingUpdateStrategy字段等: root@ ...

  10. linux 编译式安装nginx

    ./configure --prefix=/usr/local/nginx --sbin-path=/usr/local/nginx/sbin/nginx --conf-path=/usr/local ...