Categories: Webpack 教程

Webpack-dev-server API

webpack-dev-server提供了一个Node.js API,可以直接在Node.js运行时中使用。

Installation

要开始使用webpack-dev-server Node.js API,首先要安装webpack和webpack-dev-server:

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

然后在Node.js脚本中引入这些模块:

const Webpack = require(webpack); const WebpackDevServer = require(webpack-dev-server);

Start

使用下面的代码告诉webpack-dev-server实例启动服务器。

server.js const Webpack = require(webpack); const WebpackDevServer = require(webpack-dev-server); const webpackConfig = require(./webpack.config.js); const compiler = Webpack(webpackConfig); const devServerOptions = { ...webpackConfig.devServer, open: true }; const server = new WebpackDevServer(devServerOptions, compiler); const runServer = async () => { console.log(Starting server...); await server.start(); }; runServer();

然后使用以下命令运行服务器:

node server.js

startCallback(callback)

使用下面的代码告诉webpack-dev-server实例启动服务器,然后运行回调函数。

server.js const Webpack = require(webpack); const WebpackDevServer = require(webpack-dev-server); const webpackConfig = require(./webpack.config.js); const compiler = Webpack(webpackConfig); const devServerOptions = { ...webpackConfig.devServer, open: true }; const server = new WebpackDevServer(devServerOptions, compiler); server.startCallback(() => { console.log(Successfully started server on http://localhost:8080); });

然后使用以下命令运行服务器:

node server.js

Stop

使用下面的代码告诉webpack-dev-server实例停止服务器。

server.js const Webpack = require(webpack); const WebpackDevServer = require(webpack-dev-server); const webpackConfig = require(./webpack.config.js); const compiler = Webpack(webpackConfig); const devServerOptions = { ...webpackConfig.devServer, open: true }; const server = new WebpackDevServer(devServerOptions, compiler); const runServer = async () => { console.log(Starting server...); await server.start(); }; const stopServer = async () => { console.log(Stopping server...); await server.stop(); }; runServer(); setTimeout(stopServer, 5000);

然后使用以下命令运行服务器:

node server.js

stopCallback(callback)

使用下面的代码告诉webpack-dev-server实例停止服务器,然后运行回调函数。

server.js const Webpack = require(webpack); const WebpackDevServer = require(webpack-dev-server); const webpackConfig = require(./webpack.config.js); const compiler = Webpack(webpackConfig); const devServerOptions = { ...webpackConfig.devServer, open: true }; const server = new WebpackDevServer(devServerOptions, compiler); server.startCallback(() => { console.log(Successfully started server on http://localhost:8080); }); const stopServer = () => server.stopCallback(() => { console.log(Server stopped.); }); setTimeout(stopServer, 5000);

然后使用以下命令运行服务器:

node server.js

internalIP(family: “v4” | “v6”)

同步返回内部IPv4/IPv6地址

server.js

const WebpackDevServer = require(webpack-dev-server);

const logInternalIPs = async () => {
  const localIPv4 = await WebpackDevServer.internalIP(v4);
  const localIPv6 = await WebpackDevServer.internalIP(v6);

  console.log(Local IPv4 address:, localIPv4);
  console.log(Local IPv6 address:, localIPv6);
};

logInternalIPs();

internalIPSync(family: “v4” | “v6”)

同步返回内部IPv4/IPv6地址

server.js

const WebpackDevServer = require(webpack-dev-server);

const localIPv4 = WebpackDevServer.internalIPSync(v4);
const localIPv6 = WebpackDevServer.internalIPSync(v6);

console.log(Local IPv4 address:, localIPv4);
console.log(Local IPv6 address:, localIPv6);

admin

这个人很懒,什么都没有留下~

Share
Published by
admin

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

23 小时 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

1 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

2 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago