跳到主要内容

webpack-dev-server

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。

简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务。

应用​

一、安装 webpack-dev-server​

yarn add webpack-dev-server -D

二、package.json 命令行配置​

{
  "scripts": {
    "dev": "webpack serve",
  },
}

三、webpack.config.js 配置​

const Path = require("path");

module.exports = {
  devServer: {
    port: 8090,
    open: true,
    static: {
      directory: Path.resolve(process.cwd(), "./"),
    },
  },
};

原理​

  1. 创建 webpack-dev-server.js, 编写逻辑代码

在webpack搭建的项目根目录下创建webpack-dev-server.js,编写如下代码

const express = require("express");
const webpack = require("webpack");
const config = require("./webpack.config");
// webpackDevMiddleware 的作用: 
// 1. 负责打包
// 2. 返回打包文件
const webpackDevMiddleware = require("webpack-dev-middleware");

const app = express();
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler));
app.listen(3000,()=>{
  console.log('webpack-dev-server 服务启动成功！');
});
  1. 执行命令,运行 webpack-dev-server.js
node webpack-dev-server.js