前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端-团队效率(三)Vue cli3 配置

前端-团队效率(三)Vue cli3 配置

作者头像
吴文周
发布2020-01-17 16:07:57
1.5K0
发布2020-01-17 16:07:57
举报
文章被收录于专栏:吴文周的专栏

工欲善其事,必先利其器,每次给团队开发过程省下一秒钟都是十分宝贵的事情

以下是本人的Vue cli3 配置 (如遇问题升级webpack到4.16.5,其他还有问题可以留言,版本兼容问题确实是脚手架配置阶段的核心问题)

HardSourceWebpackPlugin如遇问题参照一下

github.com/mzgoddard/h…

代码语言:javascript
复制
/*
 * @Description:打包优化配置信息
 * @Author: 吴文周
 * @Github: https://github.com/fodelf
 * @Date: 2019-06-04 17:39:53
 * @LastEditors: 吴文周
 * @LastEditTime: 2019-10-14 09:07:29
 */
const webpack = require('webpack')
const path = require('path')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const HappyPack = require('happypack')
const os = require('os')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const happyThreadPool = HappyPack.ThreadPool({
  size: os.cpus().length
})
const ispro = process.env.NODE_ENV !== 'development'
// gizp 压缩资源配置类型
const GzipExtensions = ['js', 'css', 'png', 'jpg']

function resolve (dir) {
  return path.join(__dirname, dir)
}
// 共用插件
const plugins = [
  // dll插件加入
  new webpack.DllReferencePlugin({
    context: process.cwd(),
    manifest: require('./public/vendor/vendor-manifest.json')
  }),
  new AddAssetHtmlPlugin({
    // dll文件位置
    filepath: path.resolve(__dirname, './public/vendor/*.js'),
    // dll 引用路径
    publicPath: './vendor',
    // dll最终输出的目录
    outputPath: './vendor'
  }),
  // 多核配置
  new HappyPack({
    id: 'happy-babel-js',
    loaders: ['babel-loader?cacheDirectory=true'],
    threadPool: happyThreadPool
  })
]
// 开发插件这个有问题
const devPlugins = [
  /**
   * 缓存加速二次构建速度
   */
  new HardSourceWebpackPlugin({
    // Either an absolute path or relative to webpack's options.context.
    cacheDirectory: 'node_modules/.cache/hard-source/[confighash]',
    // Either a string of object hash function given a webpack config.
    configHash: function (webpackConfig) {
      // node-object-hash on npm can be used to build this.
      return require('node-object-hash')({ sort: false }).hash(webpackConfig)
    },
    // Either false, a string, an object, or a project hashing function.
    environmentHash: {
      root: process.cwd(),
      directories: [],
      files: ['package-lock.json', 'yarn.lock']
    },
    // An object.
    info: {
      // 'none' or 'test'.
      mode: 'none',
      // 'debug', 'log', 'info', 'warn', or 'error'.
      level: 'debug'
    },
    // Clean up large, old caches automatically.
    cachePrune: {
      // Caches younger than `maxAge` are not considered for deletion. They must
      // be at least this (default: 2 days) old in milliseconds.
      maxAge: 2 * 24 * 60 * 60 * 1000,
      // All caches together must be larger than `sizeThreshold` before any
      // caches will be deleted. Together they must be at least this
      // (default: 50 MB) big in bytes.
      sizeThreshold: 50 * 1024 * 1024
    }
  }),
  new HardSourceWebpackPlugin.ExcludeModulePlugin([
    {
      // HardSource works with mini-css-extract-plugin but due to how
      // mini-css emits assets, assets are not emitted on repeated builds with
      // mini-css and hard-source together. Ignoring the mini-css loader
      // modules, but not the other css loader modules, excludes the modules
      // that mini-css needs rebuilt to output assets every time.
      test: /mini-css-extract-plugin[\\/]dist[\\/]loader/
    },
    {
      test: /my-loader/,
      include: path.join(__dirname, 'vendor')
    }
  ])
]
module.exports = {
  pages: {
    // 多页面时可以配置按需打包
    index: {
      // page 的入口
      entry: 'src/pages/main.js',
      // 模板来源
      template: 'src/pages/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '山东退伍军人',
      chunks: ['chunk-vendors', 'chunk-common', 'index', 'runtime~index']
    }
  },
  publicPath: ispro ? '' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: '9090',
    open: true,
    hot: false,
    inline: true,
    disableHostCheck: false,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/*': {
        target: 'xx',
        ws: false
      }
    }
  },
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/assets/css/compute.scss";`
      }
    }
  },
  configureWebpack: config => {
    // gizp打包资源可以设置为可配置
    let pluginsArry = ispro
      ? plugins.concat([
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + GzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        }),
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log'] // 移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      ])
      : plugins.concat(devPlugins)
    return {
      plugins: pluginsArry
    }
  },
  chainWebpack (config) {
    // 添加别名    config.resolve.alias      .set('assets', resolve('src/assets'))      .set('components', resolve('src/components'))    // 可以配置优化引用优化路径暂
    // 多核打包配置
    config.module.rule('js').use.loader = 'happypack/loader?id=happy-babel-js'
    // 图片打包配置
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true,
        disable: true
      })
      .end()

    config.when(ispro, config => {
      config.plugins.delete('prefetch-index')
      // 移除 preload 插件
      config.plugins.delete('preload-index')
      // 插入dell资源
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime\..*\.js$/
          }
        ])
        .end()
      // 资源分离与抽取规则
      config.optimization.splitChunks({
        // 默认值是30kb
        minSize: 30000,
        // 被多少模块共享
        minChunks: 1,
        // 所有异步请求不得超过5个
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        cacheGroups: {
          default: false,
          vendors: false,
          chunk: {
            test: resolve('src'),
            chunks: 'all',
            enforce: false,
            priority: 10,
            name: 'chunk-vendors',
            reuseExistingChunk: true
          },
          common: {
            chunks: 'all',
            minChunks: 2,
            name: 'chunk-common',
            enforce: false,
            priority: 5
          }
          // runtime: {
          //   name: 'runtime~index',
          //   reuseExistingChunk: true,
          //   enforce: true,
          //   priority: 5
          // }
        }
      })
      // 默认配置多页面模式保证可扩展性
      config.optimization.runtimeChunk('multiple')
    })
  }
}

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年10月13日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 工欲善其事,必先利其器,每次给团队开发过程省下一秒钟都是十分宝贵的事情
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档