Webpack 资深专家详解 Webpack-Dev-Server-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是前端开发中极其重要的工具，而 Webpack-Dev-Server 又是 Webpack 中不可或缺的一部分。它是一个基于 Node.js 的开发服务器，用于在开发过程中实时编译打包代码，并提供网络服务。

为什么需要 Webpack-Dev-Server？

在 Webpack 开发的时候，每次修改代码都需要重新执行打包命令，然后刷新页面才能看到效果。这个过程非常麻烦，也极易出错。Webpack-Dev-Server 提供了一个更加便捷的开发方式，它将自动监视源码的变化，实时重新编译打包，并把文件输出到内存中。

Webpack-Dev-Server 的基本使用

Webpack-Dev-Server 的使用非常简单，在终端中输入以下命令就可以启动服务：

webpack-dev-server

然而，你会发现这个命令仅仅启动了一个 HTTP 服务器，这个服务器的根目录是当前工作目录。如果你的项目中存在 HTML 文件，可以在浏览器中访问 http://localhost:8080/index.html 这个地址来访问。

如果你想要自定义 Webpack-Dev-Server 的一些配置，可以在你的 Webpack 配置文件中添加以下代码：

module.exports = {
  //...
  devServer: {
    // 这是其他配置项
  }
}

在 devServer 中，你可以对 Webpack-Dev-Server 进行一些配置，下面我们来介绍几个常用的配置项。

contentBase

类型：string | boolean | number | object | array
默认值：false

此选项可在通知 WebpackDevServer 提供静态资源的目录。

contentBase 根目录是 webpack.config.js 所在目录，但 contentBase 优先级更高。

devServer: {
  contentBase: path.join(__dirname, 'public'),
  compress: true,
  port: 9000
}

port

类型：number
默认值：8080

此选项确定 server 在哪个端口监听，默认监听 8080 端口。

devServer: {
  port: 3000 // eslint-disable-line no-process-env
}

proxy

类型：object

来自 http-proxy-middleware的代理配置选项。

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: {'^/api' : ''}
    }
  }
}

hot

类型：boolean
默认值：false

启动模块热替换功能。

devServer: {
  hot: true
}

Webpack-Dev-Server 热更新

热更新可以让我们开发时非常想快地看到修改结果，而不必重新刷新页面。

热更新实现的原理很简单，就是在页面上加入一个 Websocket，服务端代码（Webpack-Dev-Server）侦听代码变更事件，当代码变更时，服务端向浏览器发送消息，浏览器接收到消息后，调用 Webpack 暴露的 HMR API。

为了实现热更新，我们需要在 Webpack 配置文件中进行如下配置：

// javascriptcn.com 代码示例
// webpack.config.js
const webpack = require('webpack')
module.exports = {
  //...
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

除此之外，你还需要对你的代码进行一些适当的修改，下面是一个简单的示例。

// javascriptcn.com 代码示例
// app.js
import './style.css'
console.log('Hello, webpack!')
if (module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!')
    printMe()
  })
}

// print.js
console.log('The print module has loaded! See the network tab in dev tools...')
export default function printMe() {
  console.log('Updating print.js...');
}

当修改 print.js 代码之后，你将可以在控制台看到如下信息：

[HMR] Waiting for update signal from WDS...
Accepting the updated printMe module!
Updating print.js...

Webpack-Dev-Server 的其他特性

除了上面提到的基本使用和热更新以外，Webpack-Dev-Server 还有一些其他特性，下面我们简单介绍一下。

自动打开浏览器

如果你在运行 Webpack-Dev-Server 的时候，希望自动启动浏览器打开页面，那么可以添加配置项 open。

devServer: {
  open: true
},

控制台提示

在终端中运行 Webpack-Dev-Server 的时候，我们可以看到控制打印了一些信息，这些信息会提示我们目前运行的状态，可以帮助我们更好地进行开发。

devServer: {
  stats: {
    colors: true
  }
},

请求代理

如果在开发中我们需要跨域请求数据，可以使用 proxy 参数代理请求。

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: {'^/api' : ''}
    }
  }
},

总结

Webpack-Dev-Server 是 Webpack 开发中不可或缺的一部分，使用它可以提高开发效率，减少开发难度。通过本文的介绍，相信各位读者对 Webpack-Dev-Server 的基本使用和常用配置已有了初步的了解，希望能对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65364b6b7d4982a6ebe4e04c