概念

可以使用webpack-dev-server快速开发应用程序。webpack-dev-server 为webpack开发环境提供了一个简单的 web server的开发服务器。其仅适用于开发环境。其提供了实时重载环境的功能。

其在内部使用了webpack-dev-middleware，它提供了对webpack资产内容的内存快速访问。

webpack-dev-server 在编译之后不会产生任何输出文件。而是将webpack输出的 bundle 文件保留在内存中，并将它们当作挂载在服务器根路径上的真实文件来提供服务。如果希望在你不同页面上路径中找到 bundle 文件，则可以通过修改dev server 配置中的 publicPath 选项来完成。

安装及使用介绍

安装

虽然您可以全局安装并运行webpack-dev-server，但我们建议您在本地安装它。

webpack-dev-server将始终使用本地安装而不是全局安装。

webpack-server-demo

通过CLI方式使用

最简单的方法是使用webpack CLI。

在你的配置文件webpack.config.js所在的目录下，运行：

node_modules/.bin/webpack serve

webpack serve提供以下选项：

使用语法：

webpack serve|s [entries...] [options]

选项列表：

-c或--config <value...>：提供webpack配置文件的路径，例如：./webpack.config.js。

--config-name <value...>：要使用的配置的名称。

-m或--merge：使用“webpack-merge”合并两个或更多的配置。

--env <value...>：传递给配置的环境，它是一个函数。

--progress [value]：在构建过程中打印编译进度。

-j或--json [value]：输出结果为JSON或存储在一个文件中。

-d或--devtool <value>：确定要使用的source map。

--no-devtool：不生成source map。

--entry <value...>：应用程序的入口点，例如：/src/main.js。

--mode <value>：定义传递给webpack的模式。

--name <value>：配置的名称。用于加载多个配置。

-o或--output-path <value>：webpack生成的文件的输出位置，例如：./dist/。

--stats [value]：它指示webpack如何处理统计信息，例如：verbose。

--no-stats：禁用统计输出。

-t或--target <value...>：设置构建目标，例如node。

--watch-options-stdin：当stdin流结束时停止观察。

--no-watch-options-stdin：不要在stdin流结束后停止观察。

--host <value>：服务器将绑定到的主机名/ip地址。

--port <value>：将要监听的服务端口。

--static [value...]：提供静态内容的目录。

--no-static：与上面static选项相反。

--live-reload：启用在修改文件上的实时重新加载。

--no-live-reload：禁用在修改文件上的实时重新加载。

--https：使用HTTPS协议。

--no-https：不使用HTTPS协议。

--http2：使用HTTP/2，必须与HTTPS一起使用。

--no-http2：不使用HTTP/2。

--bonjour：在启动时通过ZeroConf网络广播服务器。

--client-progress：在浏览器中打印编译进度的百分比。

--setup-exit-signals：在SIGINT和SIGTERM上关闭并退出进程。

--no-setup-exit-signals：不要在SIGNIT和SIGTERM上关闭和退出进程。

--open [value]：打开默认浏览器，或者指定浏览器名称。

--use-local-ip：使用本地IP打开默认浏览器。

--open-page <value...>：用指定的页面打开默认浏览器。

--client-logging <value>：浏览器的日志级别(none、error、warn、info、Log、verbose)。

--history-api-fallback：对于单页应用程序，回退到/index.html。

--no-history-api-fallback：对于单页应用程序，不要回退到/index.html。

--compress：启用gzip压缩。

--no-compress：禁用gzip压缩。

--public <value>：服务器的公共主机名/ip地址。

--firewall [value...]：开启防火墙或设置允许访问dev服务器的主机。

--no-firewall：禁用防火墙。

全局选项：

--color：启用控制台颜色选项。

--no-color：禁用控制台颜色选项。

-v或--version：输出'webpack'， 'webpack-cli'和'webpack-dev-server'和命令的版本号。

-h或--help [verbose]：显示命令和选项的帮助。

注意：欲了解以上选项的更多信息，请参考：https://webpack.docschina.org/configuration/dev-server/。

通过NPM脚本使用

NPM的package.json脚本是一种方便而有用的方法，可以运行本地安装的二进制文件，而不必担心它们的完整路径。

简单地定义脚本如下：

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

并在终端/控制台中运行以下命令：

npm run start:dev

NPM会自动引用node_modules中的二进制文件，并执行该文件或命令。

在webpack配置文件中如何使用

通过在配置文件添加devServer属性，完成对webpack-dev-server相关选项的设置。下面是一个简单的例子，它可以在项目根目录下从dist/目录中进行压缩和提供web服务。

var path = require('path');

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

结果

这两种方法都将启动一个服务器实例，并开始在端口8080上侦听来自本地主机的连接。

默认情况下，webpack-dev-server被配置为支持实时重载文件，当你在服务器运行时编辑你的资产文件内容时。

浏览器支持

虽然webpack-dev-server将客户端(浏览器)脚本转换为ES5状态，但该项目仅支持主要浏览器的最后两个版本。

示例工程

创建一个示例工程名称为：webpack-dev-server，进行项目的初始化及安装相应的本地webpack依赖。

mkdir webpack-server-demo
cd webpack-server-demo
npm init -y
npm install webpack webpack-cli  html-webpack-plugin webpack-dev-server

工程的结构：

工程结构

其中src/index.js的文件内容如下：

window.onload = function(){
    const div = document.createElement("div")
    div.innerText = "webpack dev server demo"
    document.body.appendChild(div)
}

package.json的文件内容如下：

{
  "name": "webpack-server-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start" : "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.28.0",
    "webpack-dev-server": "^3.11.2"
  }
}

其中webpack的配置文件如下：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.js",
    output: {
        filename:"[hash].bundle.js",
        path: path.resolve(__dirname,"dist")
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "webpack dev server 示例"
        })
    ],
    devServer: {
        contentBase: './dist'
    }
}

先执行项目的构建操作，npm run build

 npm run build

> [email protected] build D:\project\mockjs\webpack-server-demo
> webpack

(node:2760) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
asset index.html 251 bytes [emitted]
asset b9eb3fce9fed39e6bca6.bundle.js 126 bytes [emitted] [immutable] [minimized] (name: main)
./src/index.js 155 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.28.0 compiled with 1 warning in 2018 ms

然后执行npm run start,运行webpack-dev-serve。

 npm run start

> [email protected] start D:\project\mockjs\webpack-server-demo
> webpack serve

i ?wds?: Project is running at http://localhost:8080/
i ?wds?: webpack output is served from /
i ?wds?: Content not from webpack is served from ./dist
(node

然后访问http://localhost:8080/，查看效果：

页面效果

玖叶教程网

前端编程开发入门

webpack-dev-server介绍及使用详解

概念

安装及使用介绍

浏览器支持

示例工程