webpack loader plugin devtool整理

Loader

Plugin

1. HtmlWebpackPlugin: 创建html，自动引用生成的文件，这对于生成的bundle包每次都变化时（比如含有hash）特别有用。
2. webpack-bundle-analyzer：包大小分析工具
3. clean-webpack-plugin: 清空output的目录，每次生成都是新的文件
4. SourceMapDevToolPlugin: 生成source map,可以使用devtool来代替，但是这个plugin配置的更加细致，devtool提供了一下常用的source map的方式

Dev

1. source-map
2. 模块热替换：在运行时更新各种模块，而无需进行完全刷新。大大提高了开发效率。
3. 监听代码变化，自动编译，自动刷新网站
   1. webpack --watch 观察者模式，能够监听代码变化，自动编译，但是不能自动刷新网站
   2. webpack-dev-server 提供了一个简单的web服务器，能够实时reloading。最经常使用的，webpack-dev-server不是plugin，而是webpack的一个配置，叫做devServer。
      1. 版本不兼容问题
   3. webpack-dev-middleware 是一个容器，把webpack处理后的文件传递给一个服务器，webpack-dev-server封装了这个middleware，如果需要高级功能，可以使用这个