Require fs module in the project, using webpack, but always reporting errors?

require the fs module in the front-end project, but keep reporting errors?

fs.readFileSync is not a function

introduce code

var fs = require("fs");
fs.readFileSync("index.html","utf8");

this is the webpack configuration file

const path = require("path") //  "path" 
const HTMLPlugin = require("html-webpack-plugin")
const webpack = require("webpack");

const config = {
    // 
    entry: {
        app: path.join(__dirname, "../src/app.js")  // app.js
    },
    // 
    output: {
        filename: "[name].[hash].js",  //nameentry; hash apphashhash
        path: path.join(__dirname, "../dist"), // 
        publicPath: "" // 
    },
    // loader
    module: {
        rules: [
            {
                test: /.jsx$/, //loader.jsx
                loader: "babel-loader"
            },
            {
                test: /.(js)$/, //loader.js
                loader: "babel-loader",
                exclude: [
                    path.join(__dirname, "../node_modules")  // node_modulesbabeljs
                ]
            }
        ]
    },
    node: {
      fs: "empty"
    },
    plugins: [
        new HTMLPlugin({
            template: path.join(__dirname, "../src/template.html") // template.htmlhtml
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
}

const isDev = process.env.NODE_ENV === "development"

if (isDev) {
    config.devServer = {
        host: "0.0.0.0",  // 127.0.0.1localhost, ip
        port: "8888",
        contentBase: path.join(__dirname, "../dist"),
        hot: true,  //
        overlay: {  // 
            errors: true //error
        },
        // output
        publicPath: "",  // /public
        historyApiFallback: {
            index: "/index.html" // 404url
        }
    }
}

module.exports = config