使用devServer进行开发

devServer可以启动一个本地服务器，他能让Webpack实时打包我们开发中的工程代码，并以HTTP协议方式访问。

配置devServer

这里我们在前一篇笔记例子的基础上进行演示如何配置devServer。首先我们需要安装devServer的依赖：

npm install --save-dev webpack-dev-server

Webpack配置中增加如下节点。

devServer: {
    static: {
        directory: path.join(__dirname, 'dist'),
    },
    host: 'localhost',
    port: 8080,
    open: true
},

其中代码指定了devServer输出的静态文件路径、主机和端口，open: true表示devServer启动后自动打开浏览器。

配置package.json的npm script，增加启动调试服务器的命令。

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack-dev-server --mode development --watch --hot"
}

其中，--watch表示devServer会监听我们的工程源码修改，--hot表示监听到源码修改后自动刷新页面。此时，我们就可以运行npm run dev启动devServer了。不过要注意，使用devServer时，编译的结果在内存中，而不是我们的磁盘上真的有一个bundle.js文件，HTML中也只能通过./bundle.js路径引用到这个文件。

实现HMR

我们前面如果修改代码后会发现浏览器自动进行了刷新操作，而使用HMR可以实现资源的热替换。devServerv4.x下，只要配置了--hot参数，HMR就是默认开启的。不过要实现HMR还有一个条件，我们需要使用相关的API告诉Webpack一个资源是可以热替换的。

假如我们要热加载一个util.js文件，我们可以使用如下代码进行配置。

if (module.hot) {
    module.hot.accept('./util.js');
}

此时，如果我们修改了util.js的内容，浏览器是不会刷新的，而是采用了热替换的方式，我们重新触发里面的代码时，会按照新的代码来执行。

注意：Webpack中很多Loader都实现了HMR，比如加载样式的style-loader，因此实际上无需任何配置，修改样式默认就是HMR的。

实现sourceMap

通常情况下，我们开发时需要进行断点调试，然而Webpack打包后，JavaScript代码进行了压缩，因此需要sourceMap将压缩后的代码和源代码文件关联。webpack中，可以通过配置devtools开启该功能。

webpack.config.js中，添加devtool配置即可实现：

devServer: { ... },
devtool: "source-map"

此时我们可以打开浏览器的调试工具，直接查看源码或是在源代码上设置断点。

作者：Gacfox
版权声明：本网站为非盈利性质，文章如非特殊说明均为原创，版权遵循知识共享协议CC BY-NC-ND 4.0进行授权，转载必须署名，禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap