webpack & vite & vue & vue-cli &

webpack & vite & vue & vue-cli & craco-antd & react-app-rewired & customize-cra 等 项目打包后文件名称自定义

持续更新中...

1. webpack 原生

2. cacro-antd + react + webpack 使用 antd 官方配置启用项目(2022-03-03)

在项目根目录的 cacro.config.js文件中录入如下代码(configure内容)某项目的整体配置内容如下:

const CracoAntDesignPlugin = require('craco-antd')
const CracoLessPlugin = require('craco-less')
const path = require('path')

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          '@primary-color': '#5794FF'
        }
      }
    },
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessRule(lessRule, context) {
          lessRule.exclude = /\.m\.less$/
          return lessRule
        },
        modifyLessModuleRule(lessModuleRule, context) {
          lessModuleRule.test = /\.m\.less$/
          const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'))
          cssLoader.options.modules = {
            localIdentName: '[local]_[hash:base64:5]'
          }
          return lessModuleRule
        }
      }
    }
  ],
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@api': path.resolve(__dirname, 'src/api'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@ts': path.resolve(__dirname, 'src/types'),
      '@store': path.resolve(__dirname, 'src/store')
    },
    //!! configure 是本次打包要关注的内容
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.output.path = path.resolve(__dirname, 'dist')
      paths.appBuild = path.resolve(__dirname, 'dist')
      return webpackConfig
    },
    //!! configure 是本次打包要关注的内容
    rules: [
      {
        test: /\.(jsx|js|ts|tsx)$/,
        include: [path.resolve(__dirname, 'src')],
        exclude: [/node_modules/],
        use: ['eslint-loader'],
        enforce: 'pre'
      }
    ]
  }
}

经测试可以把默认的 build 改成 dist 文件名称。

3. react + antd + webpack + react-app-rewired & customize-cra

在根目录的config-override.js添加如下内容:

const { override, fixBabelImports, addLessLoader } = require('customize-cra')

/* 修改默认的打包后文件夹名称build->dist */
const path = require('path')
const paths = require('react-scripts/config/paths')
path.appBuild = path.join(path.dirname(paths.appBuild), 'dist')


module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
      style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' }
  })
)