vue.config.js常用基础配置留档

1.分享一个vue.config.js的基本配置，至少能让你的代码体积缩小2/3，嗯，就这样，复制急用

const CompressionPlugin = require('compression-webpack-plugin') // 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去掉打印，注释等多余代码
const { HashedModuleIdsPlugin } = require('webpack') // 只打包改变的文件
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin') //按需加载lodash
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') // 开启构建缓存机制

const isProd = process.env.NODE_ENV === 'production'
const path = require('path')
module.exports = {
  productionSourceMap: false,
  publicPath: './',
  outputDir: process.env.outputDir, // 生成文件的目录名称
	parallel: require('os').cpus().length > 1 // cpu大于1格式开启多线程打包
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 这个里面就是公共css的地址
        path.resolve(__dirname, 'src/assets/styles/common.less'),
      ],
    },
  },
  configureWebpack: (config) => {
    const plugins = []
    // 打包生产时生效
    if (isProd) {
      plugins.push(
        new CompressionPlugin({
          filename: '[path][base].gz',
          algorithm: 'gzip',
          test: new RegExp('.(' + ['js', 'css'].join('|') + ')$'),
          threshold: 8192,
          minRatio: 0.8,
          deleteOriginalAssets: false,
        })
      ),
        plugins.push(
          new UglifyJsPlugin({
            uglifyOptions: {
              parallel: true,
              output: {
                comments: false, // 去掉注释
              },
              warnings: false,
              compress: {
                drop_console: true,
                drop_debugger: false,
                pure_funcs: ['console.log'], //移除console
              },
            },
          })
        ),
        // 开启分离js
        (config.optimization = {
          runtimeChunk: 'single',
          splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 1000 * 60,
            cacheGroups: {
              vendor: {
                test: /[\\/]node_modules[\\/]/,
                name(module) {
                  // 排除node_modules 然后吧 @ 替换为空 ,考虑到服务器的兼容
                  const packageName = module.context.match(
                    /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                  )[1]
                  return `npm.${packageName.replace('@', '')}`
                },
              },
            },
          },
        })

      // 取消webpack警告的性能提示
      ;(config.performance = {
        hints: 'warning',
        //入口起点的最大体积
        maxEntrypointSize: 1000 * 500,
        //生成文件的最大体积
        maxAssetSize: 1000 * 1000,
        //只给出 js 文件的性能提示
        assetFilter: function (assetFilename) {
          return assetFilename.endsWith('.js')
        },
      }),
        (config.optimization = {
          splitChunks: {
            // 分割代码块
            cacheGroups: {
              vendor: {
                //第三方库抽离
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1, //在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0, //大于0个字节
                priority: 100, //权重
              },
              common: {
                //公用模块抽离
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0, //大于0个字节
                priority: 60,
              },
              styles: {
                //样式抽离
                name: 'styles',
                test: /\.(sa|sc|c|le)ss$/,
                chunks: 'all',
                enforce: true,
              },
              runtimeChunk: {
                name: 'manifest',
              },
            },
          },
        })
    }
    // 通用
    plugins.push(new HashedModuleIdsPlugin())
    // 开启构建缓存，除了首次构建，之后打包越来越快,小项目没必要，反而耗时
    plugins.push(new HardSourceWebpackPlugin())

    config.plugins = [...config.plugins, ...plugins]
  },

  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true,
      })
      .end()

    // thread-loader
    config.module
      .rule('js')
      .test(/\.js$/)
      .use('thread-loader')
      .loader('thread-loader')
      .options({
        workers: 4,
        workerParallelJobs: 50,
        poolTimeout: 2000,
        poolParallelJobs: 50,
      })
      .end()
    //按需加载lodash
    if (process.env.NODE_ENV === 'production') {
      config.plugin('loadshReplace').use(new LodashModuleReplacementPlugin())
    }
  },
  // devServer: {
  //   disableHostCheck: true,
  //   proxy: {
  //     '/index.php': {
  //       target: 'http://106.55.173.177:8081/',
  //       pathRewrite: { '^/index.php': '' },
  //       changeOrigin: true,
  //       secure: false,
  //     },
  //   },
  // },
  transpileDependencies: ['vuetify'],
  // 公共代码抽离
}