【解决使用webpack自动打包功能 ，报错 Content not from webpack is served from ‘ ‘ 且访问http://localhost:8080/ 为空 问题 】

问题描述：

在 安装了 webpack 的项目自动打包工具 webpack-dev-server 后，访问http://localhost:8080/ 时，出现报错：Content not from webpack is served from ’ ’ , 且页面访问不到数据。

配置代码如下：

1. package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

2.webpack.config.js

const path = require('path') // 导入 node.js 中操作路径的模块

// 导出一个配置对象，将来 webpack 在启动的时候，会默认查找 webpack.config.js，并读取这个文件中导出的配置对象，进行打包处理
module.exports = {
  // 编译模式  (development  production)
  mode: 'development',  // 开发模式

  // 手动指定 webpack配置打包的入口与出口
  entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路
  output: {
    path: path.join(__dirname, './dist'),  // 输出文件的存放路径  
    filename: 'bundle.js' // 输出文件的名称
  }

---

访问结果：

---

查看报错提示：

执行了

执行：
① npm install webpack-dev-server -D 命令，安装项目自动打包工具
② npm run dev 命令，重新进行打包

---

解决方案：

在 webpack.config.js 中添加如下代码：

devServer: {
    // contentBase: __dirname, -- 请注意，这种写法已弃用
    static: {
      directory: path.join(__dirname, "/"),
    },
  }

添加后的webpack.config.js代码为：

const path = require('path') // 导入 node.js 中操作路径的模块

// 导出一个配置对象，将来 webpack 在启动的时候，会默认查找 webpack.config.js，并读取这个文件中导出的配置对象，进行打包处理
module.exports = {
  // 编译模式  (development  production)
  mode: 'development',  // 开发模式

  // 手动指定 webpack配置打包的入口与出口
  entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路
  output: {
    path: path.join(__dirname, './dist'),  // 输出文件的存放路径  
    filename: 'bundle.js' // 输出文件的名称
  },
  devServer: {
    // contentBase: __dirname, -- 注意，这种写法已弃用
    static: {
      directory: path.join(__dirname, "/"),
    },
  }

---

再次访问测试：

点击 src 文件夹时，可以看到打包的入口文件为 src -> index.js

此次，记录了 在使用 webpack 的项目自动打包工具 webpack-dev-server 时，访问不到页面的解决方案 。