index.ts 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import { defineConfig, type UserConfigExport } from '@tarojs/cli';
  2. import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
  3. import devConfig from './dev';
  4. import prodConfig from './prod';
  5. import path from 'path';
  6. import TerserPlugin from 'terser-webpack-plugin';
  7. import webpack, { DefinePlugin } from 'webpack';
  8. // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
  9. export default defineConfig<'webpack5'>(async (merge) => {
  10. const baseConfig: UserConfigExport<'webpack5'> = {
  11. projectName: 'zsis',
  12. date: '2025-5-29',
  13. designWidth: 750,
  14. deviceRatio: {
  15. 640: 2.34 / 2,
  16. 750: 1,
  17. 375: 2,
  18. 828: 1.81 / 2,
  19. },
  20. sourceRoot: 'src',
  21. outputRoot: 'dist',
  22. plugins: ['@tarojs/plugin-http'],
  23. defineConstants: {},
  24. copy: {
  25. patterns: [],
  26. options: {},
  27. },
  28. framework: 'react',
  29. compiler: 'webpack5',
  30. cache: {
  31. enable: false, // Webpack 持久化缓存配置,建议开启。默认配置请参考:https://docs.taro.zone/docs/config-detail#cache
  32. },
  33. mini: {
  34. postcss: {
  35. pxtransform: {
  36. enable: true,
  37. config: {},
  38. },
  39. cssModules: {
  40. enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
  41. config: {
  42. namingPattern: 'module', // 转换模式,取值为 global/module
  43. generateScopedName: '[name]__[local]___[hash:base64:5]',
  44. },
  45. },
  46. },
  47. webpackChain(chain) {
  48. chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
  49. },
  50. },
  51. h5: {
  52. publicPath: './',
  53. staticDirectory: 'static',
  54. output: {
  55. filename: '[name].js',
  56. chunkFilename: 'js/[name].[chunkhash:8].js',
  57. },
  58. miniCssExtractPluginOption: {
  59. ignoreOrder: true,
  60. filename: 'css/[name].[fullhash].css',
  61. chunkFilename: 'css/[name].[chunkhash].css',
  62. },
  63. postcss: {
  64. autoprefixer: {
  65. enable: true,
  66. config: {},
  67. },
  68. cssModules: {
  69. enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
  70. config: {
  71. namingPattern: 'module', // 转换模式,取值为 global/module
  72. generateScopedName: '[name]__[local]___[fullhash:base64:5]',
  73. },
  74. },
  75. },
  76. webpackChain(chain) {
  77. chain.cache(false);
  78. chain.output.path(path.resolve(__dirname, '../dist/h5'));
  79. chain.optimization.minimize(false); // 彻底关闭压缩
  80. // chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
  81. chain.resolve
  82. .plugin('tsconfig-paths')
  83. .use(TsconfigPathsPlugin, [{
  84. configFile: path.resolve(__dirname, '../tsconfig.json'), // 必须指向存在的 tsconfig
  85. }]);
  86. // 打开详细日志
  87. chain.mode('production').stats('verbose');
  88. chain.merge({
  89. resolve: {
  90. fallback: {
  91. util: require.resolve('util/'),
  92. stream: require.resolve('stream-browserify'),
  93. fs: require.resolve('browserify-fs'),
  94. path: require.resolve('path-browserify'),
  95. },
  96. },
  97. });
  98. chain.optimization
  99. .minimizer('terser')
  100. .use(TerserPlugin, [{
  101. parallel: false, // 单线程,错误不会丢
  102. terserOptions: {
  103. compress: false, // 先不压缩,只混淆
  104. mangle: false,
  105. format: {
  106. comments: false,
  107. },
  108. },
  109. } as any]);
  110. chain.plugin('define-plugin')
  111. .use(DefinePlugin as any, [{
  112. 'process.env.USE_MSW': JSON.stringify(process.env.USE_MSW || 'false'),
  113. 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
  114. }]);
  115. },
  116. },
  117. rn: {
  118. appName: 'taroDemo',
  119. postcss: {
  120. cssModules: {
  121. enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
  122. },
  123. },
  124. },
  125. };
  126. if (process.env.NODE_ENV === 'development') {
  127. // 本地开发构建配置(不混淆压缩)
  128. return merge({}, baseConfig, devConfig);
  129. }
  130. // 生产构建配置(默认开启压缩混淆等)
  131. return merge({}, baseConfig, prodConfig);
  132. });