提高开发效率的插件

前端开发非常有用的两个小插件，提高开发效率

---

<一>代码编译缓存

第一次编译的代码会被缓存到 node_modules目录中，后面再次打包编译时会读取缓存，提高打包效率，

注意：删除node_modules目录后会清空所有缓存，使用需要再次运行。

// 安装
npm install --save-dev hard-source-webpack-plugin
// 或者
yarn add --dev hard-source-webpack-plugin

// 使用
// webpack.config.js
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  context: // ...
  entry: // ...
  output: // ...
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

至此就可以使用了

使用效果

第一次打包 ，关注一下时间 8812ms

第二次打包 ，关注一下时间 2390ms

速度明显快了不少。
该插件还有别的设置，可以参照git原文。

HardSourceWebpackPlugin

<二>每次打包清除dist文件内容

使用原因：多分支开发时，切换开发分支，dist打包文件容易被污染，此时就可以使用该插件了

使用方式：

// 安装
npm install --save-dev clean-webpack-plugin

// 使用
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
const webpackConfig = {
    plugins: [
        new CleanWebpackPlugin(),
    ],
};

这样每次打包时候就是当前最新的，很方便。 该插件也有其他配置可以使用，可以参照官方原文； 下方为链接地址：

CleanWebpackPlugin

此文仅展示最基础的用法，想要个性定制可以去研究一下官方。