Modules such as fs,module cannot be found when webpack-dev-server is enabled

clipboard.png

problem description

when I configured the webpack4 development environment, I made an error in turning on the dev-server Times, but there was no problem with me packaging the production environment.

the environmental background of the problems and what methods you have tried

related codes

/ / this is webpack.config.js configuration
const webpack = require ("webpack")
const path = require (" path")
const HTMLPlugin = require ("html-webpack-plugin")
const MiniCssExtractPlugin = require ("mini-css-extract-plugin") / / detach css

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

module.exports = {
entry: {

index: path.join(__dirname, "./src/js/index.js")  // 

},
output: {

path: path.join(__dirname, "./dist"),
filename: "static/js/[name].[hash].js", // //hash
// chunkFilename: "[name].[hash:4].js",
publicPath: "/" // URLAPI

},
/ / if we don"t want webpack to package a file, but manually import it directly on the page using the script tag, or when using CDN resources, the externals configuration item works.
/ / but you need to introduce
/ / externals: {
/ / jquery: "jQuery"
/ /},
/ / extract the public module
/ / optimization: {
/ / runtimeChunk: {
/ / name:" manifest"
/ /},
/ minimizer: true / / [new UglifyJsPlugin ({...})]
/ / splitChunks: {
/ / chunks: "async",
/ / minSize: 30000,
/ / minChunks: 1,
/ / maxAsyncRequests: 5,
/ / maxInitialRequests: 3,
/ / name: false
/ / cacheGroups: {
/ / vendor: {
/ / name: "vendor",
/ / chunks:" initial",
/ / priority:-10,
/ / reuseExistingChunk: false,
/ / test: / node_modules/ (. *). Js/
/ /}
/ / styles: {
/ / name: "styles",
/ / test: /. (scss | css) $/,
/ / chunks:" all",
/ / minChunks: 1,
/ / reuseExistingChunk: true
/ / enforce: true
/ /}
/ /},
resolve: {

extensions: [".js", ".jsx", ".json", ".less"],
alias: {
  "@": path.resolve(__dirname, "./src"),
}

},
module: {

// webpackJSX
rules: [{
  test: /\.jsx?$/,
  loader: "babel-loader"
}, {
  test: /\.jsx?$/, // webpackes6
  exclude: "/node_modules/",
  loader: "babel-loader"
}, {
  test: /\.css$/,
  use: [{
    loader: "style-loader"
  }, {
    loader: MiniCssExtractPlugin.loader
  }, {
    loader: "css-loader",
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: "[name]_[local]_[hash:base64]",
      sourceMap: true,
      minimize: true
    }
  }, {
    loader: "postcss-loader"
  }]
}, {
  test: /\.less$/,
  use: [
    "style-loader",
    MiniCssExtractPlugin.loader,
    "css-loader",
    "less-loader",
    "postcss-loader"
  ]
}, {
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: "url-loader",
  options: {
    limit: 10000,
    name: "static/img/[name].[hash:7].[ext]"
  }
}, {
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  loader: "url-loader",
  options: {
    limit: 10000,
    name: "static/media/[name].[hash:7].[ext]"
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: "url-loader",
  options: {
    limit: 10000,
    name: "static/fonts/[name].[hash:7].[ext]"
  }
}]

},
plugins: [

new HTMLPlugin({
  title: "webpack_react",
  filename: "./index.html",
  template: path.join(__dirname, "./index.html")
}), // HTMLWebpack
new MiniCssExtractPlugin({
  filename: "static/css/[name].[chunkhash:8].css",
  chunkFilename: "[id].css"
}),
new webpack.DefinePlugin({
  "process.env": {
    NODE_ENV: isDev ? ""development"" : ""production"" // 
  }
}),
//requireimport,
// :resolve.aliasrequirerequireProvidePlugin
// new webpack.ProvidePlugin({
//   $: "$"
// })

]
}

/ / this is the webpack.dev.config.js configuration
const webpack = require ("webpack")

const merge = require ("webpack-merge")

const webpackBase = require (". / webpack.config.js")

var path = require ("path")

module.exports = merge (webpackBase, {
/ / devtool: "cheap-module-eval-source-map",
mode:" development",
devServer: {

inline: true,//websocket
hot: true,//
contentBase: path.join(__dirname, "dist"), //
port: 3824, // 
host: "localhost",
overlay: true,
compress: false // gzip

},
watchOptions: {

ignored: /node_modules/, //
aggregateTimeout: 500, //,500
poll: 1000 //

},
plugins: [

new webpack.HotModuleReplacementPlugin()

]
})

what result do you expect? What is the error message actually seen?

seek a solution, thank you

Mar.29,2022
Menu