webpack开发环境性能优化

webpack开发环境性能优化

1.1 优化打包构建速度（HMR）

在开发环境中，我们优化的对象包括三类html文件,css文件，js文件，对于html文件来说，文件类容，数量相对较少，不易实现HMR也没有必要实现HMR；对于css文件来说，我们可以通过style-loader进行处理，style-loader内部实现热模块替换功能。对于js文件，我们需要通过js代码来实现 。
实现css模块热替换的webpack.config.js配置文件中的配置如下：先在module中加一个处理css资源的规则,规则中添加style-loader如下：

之后在devServer中添加hot:true字段如下：

通过上述配置就可以实现css资源的HMR功能。
对于js资源的HMR实现，我们也举个例子吧，首先我们定义两个文件：index.js和print.js，我们在index.js中引入print.js，在webpack.config.js中的devServer中配置 了hot:true的情况下然后通过js代码就可以实现当print.js改变时，不会重新打包构建index文件。两个文件的代码如下：
index.js:

print.js:

优化代码调试（source-map）

通过source-map来优化代码的调试，source-map是一种提供源代码到构建后代码的映射的技术（当构建后的代码出错时我们可以借助这个技术定位得到源代码中发生错误的位置）source-map的分为外部source-map和内联source-map,常用种类和分类如下：

在开发环境我们推荐使用构建速度相对较快的eval-source-map