学习Angular前置Webpack时webpack-dev-server显示Cannot GET /求助

学习Sukesh Marla所著《Angular开发之旅》的Webpack前置章节，按教程创建了包含lib1.js、lib2.js、test.js、index.html的基础项目，全局安装webpack-dev-server后执行命令：

webpack-dev-server --entry ./test.js --output-filename ./dist/main.js

服务器提示运行在localhost:8080，但浏览器访问该地址时显示空白页面，仅返回文本"Cannot GET /"，控制台出现404资源加载错误。

从命令行输出的提示Content not from webpack is served from 'xxx/public' directory可知：

• webpack-dev-server默认将public目录作为静态文件的服务根目录，但你的index.html存放在项目根目录而非public目录下，导致服务器无法找到根路径的首页文件，返回404错误。
• 命令未指定mode参数，触发webpack配置警告，但这不是导致页面无法访问的直接原因。
• 浏览器控制台的ERR_BLOCKED_BY_CLIENT错误是广告拦截类扩展阻止了第三方统计请求，与项目运行无关，可忽略。

提供三种可行方案，任选其一即可：

方案一：修改启动命令参数 #

在原命令基础上添加--content-base ./指定静态文件目录为项目根目录，同时添加--mode development消除配置警告：

webpack-dev-server --entry ./test.js --output-filename dist/main.js --content-base ./ --mode development

启动后访问localhost:8080，服务器会加载根目录的index.html，项目即可正常运行。

方案二：调整文件目录结构 #

• 在项目根目录创建public文件夹
• 将index.html移动到public文件夹内
• 执行原命令（或添加--mode development）启动服务器，访问localhost:8080即可正常加载页面

方案三：使用webpack配置文件（推荐） #

创建webpack.config.js配置文件，统一管理webpack和dev-server的设置：

module.exports = {
  entry: './test.js',
  output: {
    filename: 'dist/main.js'
  },
  mode: 'development',
  devServer: {
    static: './' // 指定静态文件服务目录为项目根目录
  }
};

之后只需执行简化命令即可启动服务器：

webpack-dev-server

内容的提问来源于stack exchange，提问作者ImpromptuMusic