webpack配置devServer

由于每次打包之后修改源文件都需要再次打包，无疑这种对于开发者来说是有点不方便的，所以webpack可以通过配置devServer（开发服务器）来进行自动化操作（自动编译，自动打开浏览器，自动刷新浏览器）

特点：只会在内存中编译打包，不会有任何输出，也即不会显示输出构建之后的目录，而运行结束自动清除内存

使用：

• 下载webpack-dev-server

  npm i -s webpack-dev-server
  

• 启动：

  npx webpack-dev-server
  

  不同于webpack全局安装可以直接使用webpack指令，此处采用本地安装npm i -s webpack-dev-server，则需要使用npx打开本地包并运行，但是直接采用以上命令运行，如果webpack-cli和webpack-dev-server版本不对应，会出现很多错误，运行不起来，则可以采取npx webpack serve来运行，具体可以参考Error: Cannot find module ‘webpack‘

• 添加webpack.config.js配置项

  module.exports = {
  devServer: {
    // 指定项目构建后的路径
      contentBase: resolve(__dirname,'bulid'),
      // 启动gzip压缩使得 访问更快
      compress: true,
      // 配置启动服务器的端口号
      port: 3000,
      // 配置是否自动打开浏览器 false(否)
      open: false
    }
  }
  

注：默认显示index.html文件，如果没有则页面无显示，会出现cannot find Get/