webpack开发环境优化 HMR、source-map

优化打包构建速度：

1.HMR：模块热替换【从 webpack-dev-server v4.0.0 开始，热模块替换是默认开启的。】

作用：一个模块发生变化，只会重新打包这一个模块，而不会打包所有模块。

hot: true

 

优化代码调试： 

2.source-map:一种提供源代码到构建后代码的映射技术（方便调试）

devtool: 'source-map'

[inlune-| hidden-| eval-][nosources-][cheap- [module-]]source-map

内联：没有生成文件，构建速度更快

外部：生成了文件

source-map：外部【能够提供错误代码的准确信息、能准确定位到源代码的错误位置】

inline-source-map:内联，只生成一个source-map，【能够提供错误代码的准确信息、能准确定位到源代码的错误位置】

hidden-source-map:外部【能够提供错误代码的准确信息、不能定位到源代码的错误位置，只能定位到构建后代码的错误位置】

eval-source-map:内联，每一个文件都生成一个source-map，都在eval，能够提供错误代码的准确信息、能准确定位到源代码的错误位置】

nosources-source-map:外部，【能够提供错误代码的准确信息、没有任何源代码信息】

cheap-source-map：外部，【能够提供错误代码的准确信息、能准确定位到源代码的错误位置所在的行，不能准确定位到列】

cheap-module-source-map：外部，【能够提供错误代码的准确信息、能准确定位到源代码的错误位置】

推荐：

开发环境：eval-source-map  或 eval-cheap-module-source-map

生产环境：source-map 或 cheap-module-source-map