webpack-dev-server API

webpack-dev-server는 Node.js 런타임에서 직접 사용할 수 있는 Node.js API를 제공합니다.

Installation

webpack-dev-server Node.js API를 사용하려면, 먼저 webpack 과 webpack-dev-server를 설치하세요.

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

그런 다음 Node.js 스크립트에 모듈이 필요합니다.

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";

start

webpack-dev-server 인스턴스에 서버를 시작하도록 지시합니다.

server.js

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from "./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

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from "./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

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from "./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

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from "./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

apply(compiler)

v6.0.0+

webpack-dev-server는 constructor에 compiler를 명시적으로 전달하지 않고도 webpack plugin으로 사용할 수 있습니다. 서버는 compiler lifecycle과 통합되어 watch mode에서 첫 번째 compilation이 완료되면 시작되고, 다시 compilation될 때 여러 번 시작되지 않으며, compiler가 닫히면 깔끔하게 종료됩니다. MultiCompiler 구성도 지원하므로 각 설정이 자체 plugin server를 실행할 수 있습니다.

server.js

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";

const compiler = webpack({
  // ...
  mode: "development",
  plugins: [new WebpackDevServer({ port: 8080 })],
});

compiler.watch({}, (error) => {
  if (error) {
    console.error(error);
  }
});

기존 compiler에 apply를 직접 호출할 수도 있습니다.

const server = new WebpackDevServer({ port: 8080 });

server.apply(compiler);

findIp(gatewayOrFamily, isInternal)

v5.1.0+

해석된 로컬 IP 주소를 동기적으로 반환하며, 일치하는 주소를 찾지 못하면 undefined를 반환합니다.

gatewayOrFamily: IP family ("v4" | "v6") 또는 gateway IP 주소입니다. gateway 주소를 전달하면 같은 subnet에 속한 로컬 interface의 주소를 반환합니다.
isInternal: 선택 사항입니다. false로 설정하면 외부에서 접근 가능한(LAN) 주소만 고려하고, true로 설정하면 내부 주소(예: loopback)만 고려합니다. 생략하면 둘 다 고려합니다.

server.js

import WebpackDevServer from "webpack-dev-server";

const localIPv4 = WebpackDevServer.findIp("v4", false);
const localIPv6 = WebpackDevServer.findIp("v6", false);

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

Edit this page·

« Previous

Stats Data

Hot Module Replacement

2 Contributors

Translators

dkstyle