fishery-app/config/index.js

import Components from 'unplugin-vue-components/webpack';
import AutoImport from 'unplugin-auto-import/webpack';
const path = require('path');

const TerserPlugin = require("terser-webpack-plugin");

const NutUIResolver = () => {
  return (name) => {
    if (name.startsWith('Nut')) {
      const partialName = name.slice(3);
      return {
        name: partialName,
        from: '@nutui/nutui-taro',
        sideEffects: `@nutui/nutui-taro/dist/packages/${partialName.toLowerCase()}/style`
      }
    }
  }
}

const config = {
  projectName: 'app',
  date: '2024-3-4',
  designWidth(input) {
    if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
      return 375
    }
    return 750
  },
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: ['@tarojs/plugin-html'],
  defineConstants: {
  },
  copy: {
    patterns: [
    ],
    options: {
    }
  },
  framework: 'vue3',
  alias: {
    '@': path.resolve(__dirname, '..', 'src'),
    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/api': path.resolve(__dirname, '..', 'src/api'),
  },
  compiler: {
    type: 'webpack5',
    prebundle: {
      enable: true,
      exclude: ['@nutui/icons-vue-taro']
    }
  },
  cache: {
    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
  },
  sass: {
    resource: [
      path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss'),
      // path.resolve(__dirname, '..', 'src/assets/styles/table.scss'),
    ],
    data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`
  },
  mini: {
    commonChunks: ['runtime', 'vendors', 'taro', 'lib'],
    webpackChain(chain) {
      chain.plugin('unplugin-vue-components').use(Components({
        resolvers: [NutUIResolver({ taro: true })]
      }))
      chain.plugin('unplugin-auto-import').use(
        AutoImport({
          imports: ['vue'],
          dts: 'types/auto-imports.d.ts',
          dirs: ['src/utils', 'src/store'],
          vueTemplate: true
        })
      )
      chain.merge({
        plugin: {
          terse: {
            plugin: TerserPlugin,
            args: [
              {
                minify: TerserPlugin.swcMinify,
                terserOptions: {
                  compress: true,
                },
              }
            ]
          }
        },
        optimization: {
          splitChunks: {
            cacheGroups: {
              lib: {
                name: 'lib',
                minChunks: 2,
                priority: 2,
              }
            }
          }
        }
      })
    },
    miniCssExtractPluginOption: {
      ignoreOrder: true,
    },
    postcss: {
      pxtransform: {
        enable: true,
        config: {
          // selectorBlackList: ['nut-']
        }
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    },
    optimizeMainPackage: {
      enable: true,
    }
  },
  h5: {
    webpackChain(chain) {
      chain.plugin('unplugin-vue-components').use(Components({
        resolvers: [NutUIResolver()]
      }))
    },
    publicPath: '/',
    staticDirectory: 'static',
    esnextModules: ['nutui-taro', 'icons-vue-taro'],
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}