zoukankan      html  css  js  c++  java
  • happypack 进一步 优化 build速率

    1、webpack.base.conf.js 使用happypack的正确姿势:

      

    'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const webpack = require('webpack')
    const vueLoaderConfig = require('./vue-loader.conf')
    const HappyPack = require('happypack')
    var os = require('os')
    var happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length})
    
    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }
    
    const happyPackPlugin = [
      new HappyPack({
        id: 'happy-babel-js',
        loaders: ['babel-loader?cacheDirectory=true'],
        threadPool: happyThreadPool,
      }),
      new HappyPack({
        id: 'vue',
        cache: false,
        threadPool: happyThreadPool,
        loaders: [
          {
            loader: 'vue-loader',
            options: vueLoaderConfig
          }
        ]
      })
    ]
    
    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
      module: {
        rules: [
          {
            test: /.vue$/,
            // loader: 'vue-loader',
            // options: vueLoaderConfig
            loader: 'happypack/loader?id=vue'
          },
          {
            test: /.js$/,
            // loader: 'babel-loader',
            loader: 'happypack/loader?id=happy-babel-js',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
          },
          {
            test: /.(png|jpe?g|gif|svg)(?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          {
            test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      },
      node: {
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // source contains it (although only uses it if it's native).
        setImmediate: false,
        // prevent webpack from injecting mocks to Node native modules
        // that does not make sense for the client
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
      },
      plugins: [
        new webpack.DllReferencePlugin({
          context: __dirname,
          manifest: require('./vendor-manifest.json')
        })
      ].concat(happyPackPlugin)
    }
  • 相关阅读:
    多项式逼近remes算法
    Linux 设置系统时间和日期 API
    阿里云ONS而微软Azure Service Bus体系结构和功能比较
    TCP并发server,每个客户一个子进程
    mybatis完美的实战教程
    sharepoint 2013 更改搜索server组态
    zoj 3672 思考题
    HashMap早知道
    My安装Eclipse三种方法插件
    java list<string>组 传递到值js排列
  • 原文地址:https://www.cnblogs.com/Mvloveyouforever/p/8428454.html
Copyright © 2011-2022 走看看