Webpack——05——使用开发服务器devServer

我们用原来的代码举例，打包其他资源里的代码
当我们打包好之后，build文件夹里生成了index.html文件，但是我们想修改代码，但是显示不出来，运行看到的东西还是之前构建的，重新打包终端输入webpack才行，这样重复打包的过程很麻烦，devServer就是自动帮我们打包的工具，那么如何配置呢？
开发服务器devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
特点：只会在内存中编译打包，不会有任何输出
启动devServer指令为：npx webpack-dev-server(这个包是本地安装，不用全局安装，所以想启动要用npx)，我们需要下载这个包 npm i webpack-dev-server -D

并且要在webpack.config.js配置

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
  entry:"./src/index.js",
  output:{
    filename:"built.js",
    path:resolve(__dirname,"build")
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
   //打包其他资源（除了html/js/css）资源以外的资源 如果还有别的资源，也加在排除里面
   //可以不写test，用exclude排除这些以外的资源
  //打包其他资源统一用file-loader处理
   //缩短文件名
   exclude:/\.(css|html|js)$/,
   loader:'file-loader',
   options:{
     name:'[hash:10].[ext]'
   }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:"development",
  devServer:{
    //项目构建后的路径
    contentBase:resolve(__dirname,'build'),
    //启动gzip压缩
    compress:true,
    //端口号
    port:3000,
    //自动打开浏览器
    open:true
  }
}

接下来启动工具，终端输入npx webpack-dev-server

如果运行成功的话，不会出现像下图这样路径，而是会停止在这，一直在等待，它会监视src文件夹下源代码的变化，会自动进行编译自动刷新浏览器
运行结果怎么看呢
通过网址localhost:3000查看