如何通过webpack-dev-server核心概念实现案例详解？

本文共计4154个文字，预计阅读时间需要17分钟。

Webpack Dev Server 的核心概念：Webpack 的 ContentBase、publicPath 和 output.path 对比

Webpack Dev Server 使用当前路径作为请求资源的路径。所谓当前路径，即执行 `webpack-dev-server` 命令的路径，作为请求资源的路径。

webpack-dev-server 核心概念

Webpack 的 ContentBase vs publicPath vs output.path

webpack-dev-server 会使用当前的路径作为请求的资源路径（所谓

当前的路径

就是运行 webpack-dev-server 这个命令的路径，如果对 webpack-dev-server 进行了包装，比如 wcf，那么当前路径指的就是运行 wcf 命令的路径，一般是项目的根路径），但是读者可以通过指定 content-base 来修改这个默认行为：

webpack-dev-server --content-base build/

这样 webpack-dev-server 就会使用 build 目录下的资源来处理静态资源的请求，如 css/ 图片等。content-base 一般不要和 publicPath、output.path 混淆掉。