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 build进行打包，在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 build打包，每次修改都要执行一次有点麻烦，怎样才能实现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学习笔记三：监听文件变化并编译

相关文章