在上一篇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主“左耳击水兽”的讲解视频记录下来，感兴趣的同学可以直接看他视频哦。
2186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
