这篇文章主讲在Vue中使用HappyPack

这篇文章主要讲的的是在Vue中使用HappyPack，其中涉及到的其他webpack中的知识点，不做讲解。

介绍HappyPack

当你要搜这篇文章是，你肯定已经知道了这个HappyPack的作用是什么，但是呢我们还是要说一下他的作用是什么。
防止随机点进来的同学 一脸懵比的进来，一脸懵逼的出去。

由于有大量文件需要解析和处理，构建是文件读写和计算密集型的操作，特别是当文件数量变多后，Webpack 构建慢的问题会显得严重。 运行在 Node.js 之上的 Webpack 是单线程模型的，也就是说 Webpack 需要处理的任务需要一件件挨着做，不能多个事情一起做。

文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理多个任务，发挥多核 CPU 电脑的威力，以提升构建速度呢？

HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

安装HappyPack

// 也可以使用 cnpm 切记下载的时候 happypack 得是小写
npm install --save-dev happypack
npm i -D happypack

引入HappyPack

这个文章主要讲的是Vue中使用，HappyPack 如果是React 或者其他的 我也不知道。
1.首先的我们要引入到webpack.conf.js 或者是 webpack.base.conf.js 这个文件当中

// 引入 Happpack 可以在 package.json 找到你下载的
const HappyPack = require('happypack');
// 安装 OS 模块 这个主要是拿到当前电脑的CPU核数
const os = require('os');
/*
	这个是设置共享线程池中的数量
	size 控制设置数量 类型 只能是 整数类型
*/
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

使用方法

大家一定要自己试着写一写，不要这个 C/V毕竟知识是自己的， 学会来才是真本事。
代码中注释掉的为原来的写法 下面的是修改后的写法
/*
1.在vue模板这个loader中 使用的是 ‘vue-loader‘，但是使用了HappyPack 就要在vue这个HappyPack中定义一个ID值来找到就像 向下面写的 loader: ‘happypack/loader?id=vue’ JS 同理
当你在使用了HappyPack 时千万不要在 原来的里面设置options 要在Happypack中设置 optioons 切记。我的vueLoaderConfig 这个是我自己配置的，这边没做展示，下面有详细的写法。
当你的Vue 文件不多时，Vue的可以不用设置 效果不大。
2. 在js的HappyPack 中使用的babel-loader 和Vue的不一样。
3. cacheDirectory 默认值为 false。当有设置时，指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)。如果设置了一个空值 (loader: ‘babel-loader?cacheDirectory’) 或者 true (loader: babel-loader?cacheDirectory=true)，loader 将使用默认的缓存目录 node_modules/.cache/babel-loader，如果在任何根目录下都没有找到 node_modules 目录，将会降级回退到操作系统默认的临时文件目录。
4. cache 默认值为 false ， 这个变量在HappyPack 升级到 3.0 或者更高的版本之后就取消这个变量，这个只是我在查文档是看到的就写上试了一下， 状态设置为 true 是 build 就会出现警告。
*/

module.exports = {
  context: ...,
  entry: {...},
  output: {...},
  resolve: {...},
  module: {
    rules: [
      // { // 原版
      //   test: /\.vue$/,
      //   loader: 'vue-loader',
      //   options: vueLoaderConfig,
      // },
      {
        test: /\.vue$/,
        loader: 'happypack/loader?id=vue',
        // options: vueLoaderConfig,
        include: [resolve('src')],
        exclude: /node_modules/,
      },
      // { // 原版
      //   test: /\.js$/,
      //   loader: 'babel-loaderl',
      //   include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
      // },
      {
        test: /\.js$/,
        loader: 'happypack/loader?id=happyBabel',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        // include: [resolve('src')],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HappyPack({
        //用id来标识 happypack处理那里类文件
      id: 'happyBabel',
      //如何处理  用法和loader 的配置一样
      // cache: false,
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
        // loader: 'babel-loader',
      }],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      // verbose: true,
    }),
    new HappyPack({
      id: 'vue',
      cache: false,
      loaders: [{
        loader: 'vue-loader',
        options:vueLoaderConfig 
      }],
      threadPool: happyThreadPool
    }),
  ],
  node: {...}
}

其他的就没了 。有漏掉的知识点，朋友们请在留言评论。谢谢