Skip to content

Latest commit

 

History

History
170 lines (111 loc) · 5.63 KB

03.md

File metadata and controls

170 lines (111 loc) · 5.63 KB
Raw
title
Webpack 带来的极致开发体验

Watch Mode （监听模式）

上面一讲中提出过一个问题：

刚才我们每次编写一次代码，就要 npm run build 一次，或者说是打包一次，岂不是很麻烦，有没有自动检测文件变化，然后自动打包的？

今天我们就来学习使用 webpack 监听模式

通过添加命令行参数

我们继续使用之前的测试项目 webpack-test

在 package.json 里面添加一条 script

// package.json
"script": {
    // ...
    "watch": "webpack --watch"
}

然后运行 npm run watch， 你会发现，在命令打包的进程在执行完一次打包之后没有结束，和之前的稍微有点儿区别。

修改测试代码, 在main.js 里面再添加一条语句

// main.js
import './js/b';
alert(123);

这个时候按一下保存按钮，会发现命令行再次进行了一个打包。通过浏览器刷新可以验证，浏览器已经加载到了最新的代码。

通过配置来启动 watch mode

第一种方法是通过 CLI 来开启了 监听模式，另外一种就是直接在我们的配置中添加一条属性。

修改webpack.config.js 文件，在最后添加一条：

// webpack.config.js
module.exports = {
    //...
    watch: true
}

然后运行 npm run build，也可以达到相同的效果。自己尝试一下。

嗯，自动打包已经实现了

devServer （开发服务）

上面的监听模式固然方便可用，每次文件变化都会进行打包，生成一个打包后的文件。

但是，当项目变得超级复杂，以来非常多，最终打包的文件比较大的时候，打包进行会变的非常缓慢，缓慢的一个重要原因是 webpack 进程花了大量的时间来读取以来文件以及写目标文件。这个时候 devServer 的概念就出现了。

devServer 可以把以来缓存在内存中，把打包后的文件也缓存在内存中，当通过浏览器加载目标代码的时候，会直接从内存中读取返回给浏览器。速度上有较大的提升。同时也带来了一定的问题，比较占用内存。

顺便来回顾之前的一个问题：

打包完成之后要验证代码，要手动刷新浏览器，有没有更好的办法？

我们下面就来解决这个开发体验问题。

webpack-dev-server

在使用 devServer 之前，我们需要在项目中安装 webpack-dev-server 包:

npm i -D webpack-dev-server

webpack-dev-server 包在运行之后会为你提供一下非常简单的 web server ，用来为浏览器提供静态资源的服务。

修改 webpack 的配置文件 webpack.config.js , 把 watch 项去掉，在最后面添加 devServer 参数。

// webpack.config.js
module.exports = {
    // ...
    devServer: {
        contentBase: './dist'  // 告诉webpack-dev-server 你打包之后的文件在什么地方。
    }
}

修改 package.json ,添加启动 webpack-dev-server 的 npm 脚本。

// package.json
"script": {
    // ...
    "devServer": "webpack-dev-server"
}

然后终端运行 npm run devServer，编译成功之后，终端会有这样的几行提示：

➜  webpack-test npm run devServer

> [email protected] devServer /Users/Ben/Work/webpack-test
> webpack-dev-server

Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
...

提示告诉我们：项目运行在 http://localhost:8080/ 这个端口下，webpack 的输出文件可以通过如上端口的根目录去访问。

还记得我们之前配置的输出文件叫做 main.bundle.js，那么按道理我们就应该可以通过 http://localhost:8080/main.bundle.js 访问到这个文件。打开浏览器验证一下。

既然我们可以通过这个URL访问到我们打包之后的文件，那么我们是不是就可以把 html 里面 script 的 src 执行这个地址呢？

修改html 文件，修改 script 的 src指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="http://localhost:8080/main.bundle.js"></script>
</body>
</html>

然后预览这张 html ，验证是否能成功。

改变文件，自动打包，自动刷新

验证能够成功加载到打包后的文件之后，尝试修改我们的源码。通过终端可以发现，当我们保存文件时，会自动打包。而且！！！而且！！！我们没有手动去刷新浏览器，浏览器就已经自动刷新运行了我们最新的代码。

尝试一下。

没有实体文件产生

我们刚才说，devServer 会把打包后的文件保存在内存中，不会产生实体文件，到底是不是这样子的？我们来验证一下。

1、通过 Ctrl + C 杀掉之前的 webpack-dev-server 进程。

2、删除已有的 ./dist 下的打包文件。

3、再次通过 npm run devServer 来开启 webpack-dev-server 进程。

然后多次去修改文件，终端显示已经打包，并且浏览器也能预览到最新的代码，但是，，始终没有在 ./dist 文件夹下看到打包后的目标文件。所以它为我们提供了非常好的开发体验。

总结：

  • watch 可以监听文件变化自动打包，每次都重新生产目标文件。
  • 可以通过 CLI 和 configuration 两种方式来启动 watch 模式。
  • 通过 webpack-dev-server 包，启动 devServer 模式，动态打包，浏览器自动刷新。文件保存在内存，速度快。

问题：

  • webpack 是如何监听文件变化的？
  • webpack-dev-server 如何在内存中报错打包内容的？