billd-live/script/config/webpack.prod.ts

import PreloadPlugin from '@vue/preload-webpack-plugin';
// import { version as axiosVersion } from 'axios/package.json';
import CompressionPlugin from 'compression-webpack-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
// import { version as piniaVersion } from 'pinia/package.json';
import TerserPlugin from 'terser-webpack-plugin';
// import { version as vueDemiVersion } from 'vue-demi/package.json';
// import { version as vueRouterVersion } from 'vue-router/package.json';
// import { version as vueVersion } from 'vue/package.json';
import { Configuration } from 'webpack';

import { gzipEnable } from '../constant';
import { chalkINFO } from '../utils/chalkTip';

console.log(chalkINFO(`读取: ${__filename.slice(__dirname.length + 1)}`));

const prodConfig: Configuration = {
  mode: 'production',
  devtool: false,
  // externals: {
  //   vue: 'Vue',
  //   'vue-router': 'VueRouter',
  //   pinia: 'Pinia',
  //   axios: 'axios',
  // },
  optimization: {
    /**
     * splitChunks属性，如果设置了mode: 'production'，会有默认行为，具体看官网
     * 但即使没有设置mode: 'production'，也没有手动添加splitChunks属性，默认还是会添加splitChunks的部分行为，
     * 比如：splitChunks.chunks:'async'等等，即会将异步代码抽离！
     */
    splitChunks: {
      // 对入口文件进行代码分离
      // chunks: 'all',  //async,initial,all
      // minSize: 20 * 1024, //生成 chunk 的最小体积。默认：20000（19.5kb）
      /**
       * maxSize:尝试将大于maxSize的chunk分割成较小的部分chunks。
       * 官网写的默认值是0，但是，实际测试：如果在chunks:async的时候，确实这个属性会生效，会将异步代码配合minSize进行抽离；
       * 但是如果在chunks:initial或all的时候，如果不手动添加maxSize属性，就不会将同步代码配合minSize进行抽离！
       * 因此，如果希望maxSize可以对同步和异步代码都进行分离，就手动设置maxSize:0，或者手动设置maxSize为自己需要设置的值，
       * 但一定不能不写这个maxSize!最起码也得写一个maxSize:0，虽然这样写会报警告，或者直接写maxSize的值和minSize值一样！
       */
      // maxSize: 0,   //不写maxSize默认就是0，这里手动设置0
      // maxSize: 30 * 1024,
      // minRemainingSize: 0, //???
      // minChunks: 1, //模块被不同entry引用的次数大于等于才能分割。
      // maxAsyncRequests: 30, //按需加载时的最大并行请求数。默认：30
      // maxInitialRequests: 30, //按需加载时的最大并行请求数。默认：30
      /**
       * enforceSizeThreshold：强制执行拆分的体积阈值和其他限制（minRemainingSize，maxAsyncRequests，maxInitialRequests）将被忽略。
       * 即拆分的包大小范围允许在这个阈值范围，即设置minSize:20 * 1024，enforceSizeThreshold: 10 * 1024，
       * 允许拆分的包在10kb-30kb之间！
       */
      // enforceSizeThreshold: 1 * 1024,  //默认：50000byte
      /**
       * 不建议全局设置filename，因为如果缓存组没有手动设置filename，默认缓存组会继承全局
       * 的filename，这样在某些情况会显得很奇葩，比如：全局设置了chunks:'async'，filename:'[id]-asyncChunks.js',
       * 而缓存组设置了一个chunks:'initial',且没有设置它的filename，那么最终打包会先匹配缓存组，然后匹配
       * 到同步代码就抽离，然后设置filename，由于这个缓存组没有设置它的filename，因此会继承全局的filename，
       * 因此就会把同步代码抽离后叫[id]-asyncChunks.js，虽然还是一样把代码抽离出来了，但是
       * 抽离出来的文件和文件名"货不对板"，做不到见名知意，这样就很别扭了。因此如果设置设置了全局的filename，那
       * 么最好就是每一个缓存组都设置自己的filename，这样就可以和全局的进行区分了
       */
      // filename: "[id]-splitChunks.js", //默认[name]-bundle.js
      /**
       * 缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项
       * 即如果匹配到缓存缓存组里的某一个，如vendor，vendor里的设置会对splitChunks的设置进行继承或覆盖
       * 即vendor里没有设置chunks，vendor就会继承splitChunks的chunks，vendor设置了filename，会覆盖splitChunks的filename
       */
      cacheGroups: {
        // cacheGroups里的优先级默认比外面的高
        // defaultVendors:false,  //禁用默认webpack默认设置的defaultVendors缓存组
        // default:false, //禁用默认webpack默认设置的default缓存组
        defaultVendors: {
          // 重写默认的defaultVendors
          chunks: 'initial',
          // minSize: 50 * 1024,
          maxSize: 100 * 1024,
          test: /[\\/]node_modules[\\/]/,
          // filename: 'js/[name]-defaultVendors.js',
          filename: 'js/[name]-[contenthash:6]-defaultVendors.js',
          priority: -10,
        },
        default: {
          // 重写默认的default
          chunks: 'all',
          maxSize: 100 * 1024,
          filename: 'js/[name]-[contenthash:6]-default.js',
          minChunks: 2, // 至少被minChunks个入口文件引入了minChunks次。
          priority: -20,
        },
      },
    },
    usedExports: true, // production模式或者不设置usedExports，它默认就是true。usedExports的目的是标注出来哪些函数是没有被使用 unused，会结合Terser进行处理
    sideEffects: true, // webpack.dev.ts有注释
    minimize: true, // 是否开启Terser,默认就是true，设置false后，不会压缩和转化
    minimizer: [
      new TerserPlugin({
        parallel: true, // 使用多进程并发运行以提高构建速度
        extractComments: false, // 默认true,会将/^\**!|@preserve|@license|@cc_on/i的注释提取到单独的文件中
        // Terser 压缩配置
        terserOptions: {
          parse: {
            // 注意：terserOptions.parse被标记了deprecated。
          },
          compress: {
            // defaults:true,默认true,传递false禁用大多数默认启用的compress转换
            arguments: true, // 默认false,尽可能将参数[index]替换为函数参数名
            dead_code: true, // 默认true,删除无法访问的代码(比如return后面的语句)
            toplevel: false, // 默认false,在顶级作用域中删除未引用的函数("funcs")和/或变量("vars"), 设置true表示同时删除未引用的函数和变量
            keep_classnames: false, // 默认false,传递true以防止terser丢弃类名
            keep_fnames: false, // 默认false,传递true以防止terser丢弃函数名
            drop_console: false, // 默认false,设置true会删掉丢掉对console.*函数的调用
            // pure_funcs: ['console.log'], // 告诉terser,console.log没有副作用,terser会将它删除
          },
          /**
           * mangle,默认值true,会将keep_classnames,keep_fnames,toplevel等等mangle options的所有选项设为true。
           * 传递false以跳过篡改名称，或者传递一个对象来指定篡改选项
           */
          mangle: true,
          toplevel: false, // 注意：terserOptions.toplevel被标记了deprecated。默认false,如果希望启用顶级变量和函数名修改,并删除未使用的变量和函数,则设置为true。
          keep_classnames: true, // 默认undefined,传递true以防止丢弃或混淆类名。
          keep_fnames: false, // 默认false,传递true以防止函数名被丢弃或混淆。
          // TODO 外层的keep_classnames和keep_fnames和compress的有啥区别or优先级？
        },
      }),
      new CssMinimizerPlugin({
        parallel: true, // 使用多进程并发执行，提升构建速度。
      }), // css压缩，去除无用的空格等等
    ],
    // runtimeChunk: {
    //   name: 'runtime'
    // }
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          // 'thread-loader',
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              cacheCompression: false, // https://github.com/facebook/create-react-app/issues/6846
            },
          },
        ],
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              cacheCompression: false, // https://github.com/facebook/create-react-app/issues/6846
            },
          },
          {
            loader: 'ts-loader',
            options: {
              appendTsxSuffixTo: ['\\.vue$'],
              // If you want to speed up compilation significantly you can set this flag. https://www.npmjs.com/package/ts-loader#transpileonly
              transpileOnly: true,
              happyPackMode: false,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // http压缩
    gzipEnable &&
      new CompressionPlugin({
        test: /\.(css|js)$/i,
        threshold: 10 * 1024, // 大于10k的文件才进行压缩
        minRatio: 0.8, // 只有压缩比这个比率更好的资产才会被处理(minRatio =压缩大小/原始大小),即压缩如果达不到0.8就不会进行压缩
        algorithm: 'gzip', // 压缩算法
      }),
    // 注入script或link
    new HtmlWebpackTagsPlugin({
      append: false,
      publicPath: '', // 默认会拼上output.publicPath，因为我们引入的是cdn的地址，因此不需要拼上output.publicPath，直接publicPath:''，这样就约等于拼上空字符串''
      links: [],
      // scripts: [
      //   `https://unpkg.com/vue@${vueVersion}/dist/vue.global.prod.js`,
      //   `https://unpkg.com/vue-router@${vueRouterVersion}/dist/vue-router.global.prod.js`,
      //   `https://unpkg.com/axios@${axiosVersion}/dist/axios.min.js`,
      //   `https://unpkg.com/vue-demi@${vueDemiVersion}/lib/index.iife.js`,
      //   `https://unpkg.com/pinia@${piniaVersion}/dist/pinia.iife.prod.js`,
      // ],
    }),
    // 将 CSS 提取到单独的文件中
    new MiniCssExtractPlugin({
      /**
       * Options similar to the same options in webpackOptions.output
       * all options are optional
       */
      filename: 'css/[name]-[contenthash:6].css',
      chunkFilename: 'css/[id]-[contenthash:6].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
    // Css TreeShaking
    // new PurgeCssPlugin({
    //   /**
    //    * 实际测试有一些bug，比如html里面有ul这个元素，css里面的.ul{}，#ul{}，ul{}都会打包进去？？？
    //    * 在js文件里如果有给元素添加类，但是注释了，如：// divEle.className='test123'，但是这个.test123一样会打包进去，得手动删除这行注释代码才行！
    //    * 而且貌似不能对.vue文件进行treeShaking，而且构建出来的css文件会空白，没有任何内容，所以暂时不用这个插件了
    //    */
    //   paths: glob.sync(`${path.resolve(__dirname, '../src')}/**/*`, {
    //     nodir: true,
    //   }),
    //   safelist: function () {
    //     return {
    //       standard: ['body', 'html'],
    //     };
    //   },
    // }),
    // 预加载
    new PreloadPlugin({
      rel: 'preload',
      include: 'initial',
      fileBlacklist: [/\.map$/, /hot-update\.js$/],
    }),
    // 预获取
    new PreloadPlugin({
      rel: 'prefetch',
      include: 'asyncChunks',
    }),
    // new webpack.optimize.ModuleConcatenationPlugin(), //作用域提升。！！！在使用cdn时，axios有问题，先不用！
  ].filter(Boolean),
};

export default prodConfig;