webpack学习笔记（三）：监听文件变化并编译

在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行。这次学习如何在文件发生变化时自动打包编译。

首先，我们来看一下配置文件

const path = require('path')
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, './list')},mode: 'development'
}

入口文件index.js：

console.log('abc')

在package.json中设置脚本命令：

在命令行中输入npm run dev进行打包，在index.html中引入打包后的js文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../list/bundle.js"></script>
</head>
<body>
</body>
</html>

打开控制台，可以看到输出结果：

如果我们在index.js中添加一行代码：

想要在控制台看到输出def就必须再执行一次npm run dev打包，每次修改都要执行一次有点麻烦，怎样才能实现webpack在文件变化时自动打包呢？

第一种方法，在打包命令中加入-- watch

这样，每次修改文件并且保存后，webpack都会自动打包，不必再输入命令

第二种方法，可以在配置文件设置：
第三种方法，也是最常用的方法，就是使用webpack-dev-server包来打包，首先输入npm install webpack-dev-server -D下载，下载完后更改package.json中的执行脚本，将webpack改为webpack-dev-server：

执行npm run dev，查看控制台输出：

黄色箭头表示在本地可以使用http:localhost:8080来访问当前项目；绿色箭头表示在网络上使用http://192.168.33.59:8080访问当前项目；红色箭头表示项目开启的服务所在的位置在当前项目的public目录下，当在浏览器中访问项目时访问的是public目录下的资源。我们可以在项目根目录下创建public目录，在该目录下创建index.html文件：

在浏览器地址栏中输入http:localhost:8080，可以看到，能成功访问到public/index.html的内容：

但是查看浏览器的控制台：

发现访问不到/list/bundle.js的内容。原来这个public目录是跟外面的文件夹无关的，而打包后的文件存在在内存中，路径是当前的public目录，可以在地址栏中输入http://localhost:8080/bundle.js，结果：

因此要想index.html有效访问到打包后的文件，更改路径即可：

使用webpack-dev-server打包时可以在命令中加入参数：
（1）使用--static指定开启服务的文件夹：

（2）使用--open，使得开启服务后自动打开浏览器：

（3）使用--port指定端口号：

（4）使用--hot开启热更新，关于热更新后面再讲：

（5）使用--compress表示要压缩代码：

当然这些配置也可以在配置文件中指定，如下代码所示：

如果需要设置的参数过多的话建议直接在配置文件中设置，避免命令太长。

关于webpack监听文件变化并自动编译打包的内容大概就这么多。本篇笔记是看了B站up主“左耳击水兽”的讲解视频记录下来，感兴趣的同学可以直接看他视频哦。

webpack学习笔记（三）：监听文件变化并编译相关推荐

Java实现监听文件变化的三种方法，推荐第三种
背景在研究规则引擎时,如果规则以文件的形式存储,那么就需要监听指定的目录或文件来感知规则是否变化,进而进行加载.当然,在其他业务场景下,比如想实现配置文件的动态加载.日志文件的监听.FTP文件变动监 ...
python监听文件最后修改人_Python持续监听文件变化代码实例
在日常的工作中,有时候会有这样的需求,需要一个常驻任务,持续的监听一个目录下文件的变化,对此作出回应. pyinotify就是这样的一个python包,使用方式如下: 一旦src.txt有新的内容,程 ...
监听文件变化并自动运行 npm script
监听文件变化并自动运行 npm script 软件工程师做的事情基本都是在实现自动化,比如各种业务系统是为了业务运转的自动化,部署系统是为了运维的自动化,对于开发者本身,自动化也是提升效率的关键环节, ...
Unity学习笔记：监听函数有什么卵用？（似乎就是从一件事过渡到另一件事？）
Unity学习笔记:监听函数有什么卵用?(似乎就是从一件事过渡到另一件事?) 个人学习经验,仅供参考,欢迎各位码友批评指正. 做项目敲代码时,一直不是很理解监听函数是个什么玩意. 按我目前的理解,说白 ...
node --- 监听文件变化(静态、动态、子进程)
静态版本:监听的文件名写死了 // watcher.js 'use strict' const fs = require('fs'); fs.watch('target.txt', () => ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
webpack学习笔记 (三) webpack-dev-server插件和HotModuleReplacementPlugin插件使用
webpack-dev-server插件 webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务. we ...
RPG学习笔记三（PF文件导入，RPGLE文件导出）
在运行时打入cmd命令,进入Dos状态下. >ftp >open IP(AS400的IP地址) >输入用户名 >输入密码 >quote type b 1 >put ...
grunt 监听文件改变自动编译js
gruntfile.js配置如下: module.exports = function(grunt){ Project configuration.grunt.initConfig({pkg: gru ...

webpack学习笔记（三）：监听文件变化并编译

webpack学习笔记（三）：监听文件变化并编译相关推荐

最新文章

热门文章