import { defineConfig, type UserConfigExport } from '@tarojs/cli' import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin' import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack' import devConfig from './dev' import prodConfig from './prod' // 获取当前编译平台(默认微信小程序) const getPlatform = () => { // 从环境变量获取编译平台,Taro 会自动设置TARO_ENV 环境变量 return process.env.TARO_ENV || 'weapp' } // 获取当前环境(开发/生产) const getEnv = () => { return process.env.NODE_ENV || 'development' } export default defineConfig<'webpack5'>(async (merge, { command, mode }) => { // 动态生成输出目录:dist/平台/环境 const platform = getPlatform() const env = getEnv() const outputDir = `dist/${platform}/${env}` const baseConfig: UserConfigExport<'webpack5'> = { projectName: 'mini', date: '2025-7-27', designWidth: 750, deviceRatio: { 640: 2.34 / 2, 750: 1, 375: 2, 828: 1.81 / 2 }, sourceRoot: 'src', outputRoot: outputDir, // 使用动态生成的输出目录 plugins: [ "@tarojs/plugin-generator" ], defineConstants: { }, copy: { patterns: [ ], options: { } }, framework: 'react', compiler: 'webpack5', cache: { enable: false // Webpack 持久化缓存配置,建议开启。默认配置请参考:https://docs.taro.zone/docs/config-detail#cache }, mini: { postcss: { pxtransform: { enable: true, config: { } }, cssModules: { enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true config: { namingPattern: 'module', // 转换模式,取值为 global/module generateScopedName: '[name]__[local]___[hash:base64:5]' } } }, webpackChain(chain) { chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin) chain.merge({ plugin: { install: { plugin: UnifiedWebpackPluginV5, args: [{ // 这里可以传参数 cssSelectorReplacement:{ universal: ['view','text','button', 'input'] }, cssChildCombinatorReplaceValue: ['view', 'text', 'button', 'input'] }] } } }) } }, h5: { publicPath: '/mini/', staticDirectory: 'static', output: { filename: 'js/[name].[hash:8].js', chunkFilename: 'js/[name].[chunkhash:8].js' }, miniCssExtractPluginOption: { ignoreOrder: true, filename: 'css/[name].[hash].css', chunkFilename: 'css/[name].[chunkhash].css' }, postcss: { autoprefixer: { enable: true, config: {} }, cssModules: { enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true config: { namingPattern: 'module', // 转换模式,取值为 global/module generateScopedName: '[name]__[local]___[hash:base64:5]' } } }, webpackChain(chain) { chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin) }, router: { basename: '/mini', }, }, rn: { appName: 'taroDemo', postcss: { cssModules: { enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true } } } } process.env.BROWSERSLIST_ENV = process.env.NODE_ENV if (process.env.NODE_ENV === 'development') { // 本地开发构建配置(不混淆压缩) return merge({}, baseConfig, devConfig) } // 生产构建配置(默认开启压缩混淆等) return merge({}, baseConfig, prodConfig) })