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

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

watch

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

在项目中有两种配置方式

  • 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 执行命令,编译完成后也不会终止进程,当文件更改后会再次重新编译

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

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 文件被修改时,执行修改的部分,以及修改后的回调函数。

hotOnly

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

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

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

compress

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

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

proxy

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

当项目开发时,接口请求存在跨域情况时,可通过 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端口

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

其它参数

  • 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的内容可以参考我其它的博文,持续更新中~


一颗冰淇淋
162 声望16 粉丝

开心学前端 : )