webpack dev server 与 hot module

2022-05-22 本文已影响0人一颗冰淇淋

通过 webpack 命令编译源代码时，如果我们对源代码进行了修改，需要重新执行命令才能看到编译后的效果。

这样在开发中非常的影响效率，如果存在一种方式，当文件被修改时，webpack 自动监听重新编译，并反馈给开发者，这样就能更高效的进行开发。

watch

我们通过 webpack 执行命令时，编译完成之后进程会停止，而 webpack --watch 编译完成后，不会停止进程，并且当文件内容发生更改时，将重新执行编译操作。

1_--watch.png

在项目中有两种配置方式

package.json 中配置命令
webpack.config.js 中配置参数

// package.json
"scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
},

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

配置在 package.json 中通过 npm run watch 执行命令，实际上就是执行的 webpack --watch，在 webpack.config.js 中配置 wath 参数，可以直接通过 npm run build 编译

webpack-dev-server

通过 watch 命令，每一次重新编译都会生成新的文件，包括 js、html、css、图片资源，这样效率不高，并且通过开启服务，在浏览器中展示 html 页面的方式每次都会刷新页面。

可以通过 webpack-dev-server 解决以上问题，它每次编译不会重新生成文件，而是将资源保存在内存中。

通过 npm install webpack-dev-server -D 安装依赖，package.json 中配置

// package.json
"scripts": {
    "build": "webpack",
    "serve": "webpack serve"
},

npm run serve 执行命令，编译完成后也不会终止进程，当文件更改后会再次重新编译

2_dev-server.png

此时会开启一个服务，通过 http://localhost:8080/ 在浏览器中访问

3_dev-server浏览器中.png

Hot Module Replace

目前为止，每次修改了文件，都会重新加载整个页面，在开发时，随着项目的增大，对所有页面都重新加载耗时会越来越长，有时候只是对某些样式做了修改，只更新修改的内容对开发而言更高效。

这时候我们就可以通过 Hot Module Replace （热模块替换）来实现，需要在 webpack.config.js 中开启，以及需要使用 Hot Module Replace 的地方通过 module.hot.accept 引入。

// webpack.config.js
module.exports = {
  devServer: {
    hot: true,
  },
};

// index.js
import './math';

if (module.hot) {
  module.hot.accept('./math', () => {
    console.log('math文件被修改了');
  });
}

当引入的 math.js 文件被修改时，执行修改的部分，以及修改后的回调函数。

4_hot-module-replace.png

hotOnly

当源代码编译出错且被解决后，浏览器会被刷新，所有内容将重新加载。想要编译错误也通过热更新来处理，需要设置 hotOnly 属性。

devServer: {
  hot: true,
  hotOnly: true,
}

此时，当错误被修复时，只会更新修复的文件

5_hotOnly.png

compress

compress 属性表示是否对编译后资源压缩，开启后将采用 gzip 的压缩方式，在响应头标识 Content-Encoding，浏览器会自动解压 gzip 文件

6_响应头gzip.png

通过 compress: true 来开启，bundle.js 文件由原来的367kb压缩到93kb

7_compress.png

proxy

比如本地项目运行在8000端口，访问接口 http://localhost:9000/math，会报错跨域

8_跨域.png

当项目开发时，接口请求存在跨域情况时，可通过 devServer 中的 proxy 属性配置代理解决，发送请求时直接使用 /api 来替代 http://localhost:9000/

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9000/',
      },
    },
  },
};

通过 fetch 发送网络请求

const url = '/api/math';
fetch(url)
  .then((res) => {
    console.log('then', res);
    return res.text();
  })
  .then((res) => {
    console.log('res', res);
  });

请求成功并获取响应，但此时我们发现请求url地址多了个 "/api"，以及请求源地址还是 8000端口

9_proxy的api.png

可以通过 pathRewrite 属性替换 /api，以及 changOrigin 修改请求host属性

10_changeOrigin.png

其它参数

host 设置主机地址
port 设置端口
open 编译后是否自动打开浏览器
publicPath 指定 index.html 文件打包引用的基本路径
contentBase 为引入的静态资源提供服务（默认值指向当前目录的路径）
watchContentBase 当引用的静态资源发生变化时，是否刷新浏览器

整合以上 devServer 的配置

module.exports = {
  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, './public'),
    watchContentBase: true,
    hotOnly: true,
    port: 8000,
    open: true,
    compress: true,
    proxy: {
      '/api': {
        target: 'http://localhost:9000/',
        pathRewrite: {
          '/api': '',
        },
        changeOrigin: true,
      },
    },
  },
};

配置好 devServer 的属性，可以让我们的开发变得更高效~

以上就是 webpack dev server 与 hot module replace 相关的总结，更多有关webpack的内容可以参考我其它的博文，持续更新中~