webpack开发自动编译模式初体验

官网截图

1. watch mode：

• 使用webpack命令行 webpack -w / --watch ，直接在cmd中跑或者放在package.json的script中都可以，需要注意的是，webpack3.0~4.0自带cli，而4.0+需要额外安装webpack-cli包

  webpack -w
  webpack --watch

• 在配置文件中配置，官网watch直达链接

  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }

这个watch mode只能实现文件改变了自动编译，如果需要自动刷新浏览器，可以使用webpack-dev-server

2. webpack-dev-server 提供了一个使用express的服务器，可以自动刷新浏览器，需要在配置文件中配置devServer字段，官网api直达

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 9000
  }

需要注意的是，publicPath这个字段，当我们使用webpack进行打包的时候，静态资源的路径前会加上publicPath字段值，而使用webpack-dev-server时，是把静态资源放在一个隐藏的publicPath文件夹中去，如果不是自动生成的index.html，html的引用路径需要特别注意一下
还有就是，对于跨域的资源，devServer有一个proxy字段，而vue-cli直接构建的配置是proxyTable字段，不要混淆~

3. webpack-dev-middleware，这个暂时还没有用到过，官网解释为

可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求

以后用到了再来补充~