阅读 158

Vue 项目之 Webpack 中 DevServer 的配置(1)

「这是我参与11月更文挑战的第24天,活动详情查看:2021最后一次更文挑战

前面我们已经讲了 Webpack 的基本配置、对 CSS 的加载、对其它资源的加载、插件的使用、Webpack 中使用 BabelJavaScript 的处理、Webpack 中对 .vue 文件的加载,下面,我们要讲的是如何用 Webpack 搭建一个本地服务器(Server)。

先来做下准备工作:

  1. 删除 webpack_vue 目录下的 buildnode_modules 文件夹、demo.jstest.js 文件;
  2. 拷贝一份 webpack_vue 目录,并重命名为 webpack_server
  3. 打开 VS Code 的终端,切换目录到 webpack_server 下,运行 npm install 安装当前项目(webpack_server)所需依赖,安装完成后,项目目录如下:

image-20211125122408646

1. 为什么需要搭建本地服务器

目前,我们每次在项目中修改了源代码后,都需要运行 npm run build 命令重新对源代码进行打包,打包出最新的 build 文件夹,然后再通过 Live Server 插件搭建一个本地服务器,在这个本地服务器上打开 build 文件夹下的 index.html 文件。之后,如果我们对代码又做了修改,那就又得手动打包,再通过 Live Server 插件搭建一个本地服务器,将 build 文件夹下的 index.html 文件运行在这个本地服务器上。也就是说,每次修改了代码,都得自己重新打包,再通过 Live Server 打开入口文件查看效果。

下面,我们想实现这样的效果:项目中的源代码一旦发生了修改,浏览器中就能实时地看到修改后的效果。也就是说,我们希望对当前 src 目录下的代码做监听,一旦里面的代码做了修改,webpack 就能自动地来对修改后的代码重新编译(之前是需要我们手动执行 npm run build 命令来进行编译的),编译完后把新的代码的运行效果立刻反映到浏览器中。甚至,如果我们只修改了某个文件中某一行的代码,那么希望这一行代码在浏览器中反映出来就可以了,其它内容都不要动,原来的浏览器中的状态依然保留着,不要有任何修改(因为如果刷新了浏览器页面,原来的状态可能就消失了)。这个时候,我们就可以通过搭建本地服务器,再利用热模块替换(HMR)功能实现这样的效果。

总结一下就是:

  • 目前我们开发的代码,为了运行需要有两个操作:

    1. npm run build,编译相关的代码;
    2. 通过 Live Server 插件或者直接通过浏览器,打开 index.html 代码,查看效果;
  • 这个过程经常操作会影响我们的开发效率,所以我们希望可以做到:当文件发生变化时,可以自动完成编译和展示

为了完成自动编译,Webpack 提供了 3 种可选的方式:

  • webpack watch mode
  • webpack-dev-server(常用);
  • webpack-dev-middleware(用得不多);

下面,我们就演示一下如何通过前面两种方式实现 webpack 对代码的自动编译。

文章分类
前端
文章标签