[webpack] Content not from webpack is served from “xxxx“ 并且 http://localhost:8080/ 数据为空解决方案

问题过程

执行webpack自动打包脚本时，访问== http://localhost:8080/ ==数据为空

package.json

"scripts": {
        "dev": "webpack-dev-server",
    },

webpack.config.js

const path = require('path')
module.exports = {
    //编译模式 两个可选值 development production
    // development 不会进行代码的压缩和混淆
    // production 会进行代码的压缩和混淆
    //两者打包大小不同
    mode: 'development',
    // mode: 'production'
    entry: path.join(__dirname, './src/index.js'),
    // output只支持对象形式的配置
    output: {
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    },
}

结果

在这里插入图片描述

解决方案

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

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

即：

const path = require('path')
module.exports = {
    //编译模式 两个可选值 development production
    // development 不会进行代码的压缩和混淆
    // production 会进行代码的压缩和混淆
    //两者打包大小不同
    mode: 'development',
    // mode: 'production'
    entry: path.join(__dirname, './src/index.js'),
    // output只支持对象形式的配置
    output: {
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    },
    devServer: {
        // contentBase: __dirname, -- 请注意，这种写法已弃用
        static: {
            directory: path.join(__dirname, "/"),
        },
    },
}

点击src到达首页