开启webpack-dev-server时fs,module等模块找不到

Question

问题描述

我在配置webpack4开发环境时，开启dev-server时报错，但是我打包生产环境确实没有问题。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 这是webpack.config.js配置
const webpack = require('webpack')
const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")// 分离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: '/' // 静态资源引用时的路径，用于区分URL是静态资源还是API请求，为路径前缀

},
// 如果我们不想webpack打包某个文件，而是直接在页面使用script标签手动引入，或者使用CDN资源的时候，externals这个配置项就起作用了。
// 但是在使用时需要引入
// externals: {
// jquery: 'jQuery'
// },
// 提取公共模块
// 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: {

// webpack可以识别JSX
rules: [{
  test: /\.jsx?$/,
  loader: 'babel-loader'
}, {
  test: /\.jsx?$/, // webpack可以识别es6语法
  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')
}), // 自动生成一模板HTML页面，并根据Webpack配置插入资源
new MiniCssExtractPlugin({
  filename: "static/css/[name].[chunkhash:8].css",
  chunkFilename: "[id].css"
}),
new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: isDev ? '"development"' : '"production"' // 因为这个插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号
  }
}),
//提供全局的变量，在模块中使用无需用require，import引入,但是会打包在一起。
// 有时需要配合：resolve.alias使我们不用频繁地写一长串的引用路径，但是使用的时候还是先要require，如果我们懒到require都不想写呢？ProvidePlugin这个插件就派上用场了。
// new webpack.ProvidePlugin({
//   $: '$'
// })

]
}

// 这是webpack.dev.config.js配置
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()

]
})

你期待的结果是什么？实际看到的错误信息又是什么？

求解决，谢谢大家