Webpack 3.0 配置 webpack-dev-server 完整指南

Webpack 3.0 开发服务器配置概述

近期在探索 Webpack 时，了解到其具备搭建本地小型服务器的能力（熟悉 vue-cli 的用户对此应有印象），因此决定进行实践。然而实际操作中遇到诸多障碍，既因对文档理解不足、未掌握 webpack-dev-server 的工作机制，也因参考的多数博客配置无法运行（可能涉及版本差异或个人配置失误）。为此，本文将基于 Webpack 3.0 演示如何成功启动 dev-server，并解析相关配置与原理，旨在避免读者走弯路。

安装与基础配置

此处假设读者已安装 Webpack 及所需的 loader 和 plugins。由于 webpack-dev-server 是独立的 npm 包，需通过 npm 进行安装：

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

随后，在 webpack.config.js 文件中添加相应配置：

const path = require("path");
module.exports = {
   entyr:{
      ....... //设置入口文件
   },
   output:{
      ....... //设置出口文件
   },
   module:{
      ....... //配置loader，注意使用rules而不是loaders
   },
   plugins:[
      ....... //注意是数组
   ],
   devServer:{
      //我们在这里对webpack-dev-server进行配置
   }        
}

devServer 常用属性详解

devServer 对象中常用的配置属性包括：

1. contentBase："./"，指定本地服务器渲染页面的目录，通常设为当前目录即可；

2. historyApiFallback：true，在构建单页应用（SPA）时非常关键，它利用 HTML5 History API，使任意跳转或 404 响应重定向至 index.html 页面；

3. inline：true，用于支持 dev-server 的自动刷新功能。Webpack 支持两种自动刷新模式：iframe 模式和 inline 模式。iframe 模式无需在 devServer 中配置，只需通过特定 URL 格式访问即可；而 inline 模式更为常用，需在 devServer 中设置 inline 为 true，并在启动时确保该配置生效，具体细节后续说明；

4. hot：true，启用 Webpack 的热模块替换（HMR）特性。此配置常导致问题，许多教程直接设为 true，此处也暂设为 true，后续将详细处理；

5. port：端口号（默认 8080），用于指定服务器监听端口，通常无需额外说明；

脚本设置与启动问题排查

上述即为常用配置。为方便操作，建议在 package.json 中设置 webpack-dev-server 的启动脚本：

"scripts": {
  ......
  ......
  "start":"webpack-dev-server --inline"
 },

注意，若在 devServer 中设置了 inline：true，此处脚本也必须相应配置！

此时打包并运行服务器，index.html 页面应能正常显示。尽管打包后的 js 文件出现在 src 目录中，但控制台会报错：

控制台提示：Hot Module Replacement is disabled；

令人困惑的是，此前已在 devServer 中设置了 hot 为 true。实际上，该属性目前可能已失效，要实现热模块替换，必须引入 webpack.HotModuleReplacementPlugin 插件。因此，webpack.config.js 需补充如下配置：

const path = require("path");
const webpack = requier ("webpack");

module.exports = {
   entyr:{
      ....... //设置入口文件
   },
   output:{
      ....... //设置出口文件
   },
   module:{
      ....... //配置loader，注意使用rules而不是loaders
   },
   plugins:[
     new webpack.HotModuleReplacementPlugin()
      ....... //注意是数组
   ],
   devServer:{
     contentBase: "./", 
   historyApiFallback:true,
   inline:true,
   hot:true
   }        
}

内存中 Bundle.js 的说明

此时在终端运行 npm run start，服务器即可成功搭建！

此外需注意，webpack-dev-server 使用的 bundle.js 并非 webpack.config.js 中 output 配置的打包结果，而是由 webpack-dev-server 自行生成并存储于内存中。因此，该 bundle.js 文件不会出现在 output 或其他指定路径中，也无法直接查看！

本文内容至此结束，希望对您的学习有所帮助，欢迎支持本站。