webpack: hard-source-webpack-plugin-速度优化

1、背景

  在项目实现的过程中，想在代码更改的同时，查看效果的改变，而这个时候长时间的编译等待，造成了额外的时间浪费。

2、简介

HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）。

3、实现

安装：yarn add --dev hard-source-webpack-plugin（或者使用npm）。
并在webpack的插件配置中添加此插件：
文件路径：build/webpack.dev.conf.js：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
...
module.exports = merge(baseWebpackConfig, {
   
  module: {
   
    rules: utils.styleLoaders({
    sourceMap: config.dev.