@craco/craco复写cra项目配置

时间：2025-01-22 15:31:23

路径别名(alias)

const webpackConfig = {
      webpack: {
        alias: {
          '@': (__dirname, 'src'), // 配置src别名
        },
    }
}
 = webpackConfig

修改打包产物文件夹名称

cra默认打包后的产物文件夹名build,我们习惯性的叫dist

关键的两行必须写:

= 'dist'

path: (__dirname, 'dist')

const webpackConfig = {
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
           = 'dist' // 修改打包输出文件目录
           = {
            ...,
            path: (__dirname, 'dist'), // 修改打包输出文件目录 两步都要写
            publicPath: whenProd(() => '/', '/'), // 静态资源publicpath
              }
          }
        })
    }
}

生产库引用cdn

cra内置了HtmlWebpackPlugin插件,直接用cra的getPlugin方法获取插件实例即可

const { getPlugin, pluginByName, whenProd } = require('@craco/craco')
const webpackConfig = {
    webpack: {
        configure((config,{env, paths})){
             // 线上替换cdn key:value key为库的名字 value为umd模块导出到global对象的key名
      whenProd(() => {
         = {
          react: 'React',
          'react-dom': 'ReactDOM',
          history: 'History',
          'react-router-dom': 'ReactRouterDOM',
          redux: 'Redux',
          'react-redux': 'ReactRedux',
          dayjs: 'dayjs',
          antd: 'antd',
          axios: 'axios',
          '@ant-design/icons': 'icons',
        }
      })
      // 根据插件名获取插件 返回是否找到和匹配的插件
      const { isFound: isHtmlWebpackPluginFound, match: htmlWebpackPlugin } =
        getPlugin(webpackConfig, pluginByName('HtmlWebpackPlugin'))
      if (isHtmlWebpackPluginFound) {
         = whenProd(
          () => '后台管理系统-生产环境',
          '后台管理系统-开发环境'
        )
        // cdnurl要按照库的相互依赖优先级填写 被依赖的写前面优先加载
         = whenProd(
          () => ({
            js: [
              '/ajax/libs/react/18.2.0/umd/',
              '/npm/react-router-dom@5.3.0/umd/',
              '/ajax/libs/history/4.9.0/',
              '/ajax/libs/react-dom/18.2.0/umd/',
              '/ajax/libs/redux/4.2.0/',
              '/ajax/libs/react-redux/8.0.5/',
              '/ajax/libs/dayjs/1.11.7/',
              '/ajax/libs/antd/5.1.6/',
              '/ajax/libs/axios/1.2.5/',
              '/ajax/libs/ant-design-icons/5.0.1/',
            ],
            css: ['/ajax/libs/antd/5.1.6/'],
          }),
          // 本地环境设为空 防止页面遍历报错
          {
            js: [],
            css: [],
          }
        )
      }
            return webpackConfig
        }
    }
}
 = webpackConfig;

html模板遍历生成标签: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/" />
    <!--
       provides metadata used when your web app is installed on a
      user's mobile device or desktop. See /web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/" or "", "%PUBLIC_URL%/" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <!-- js表达式写在<\%表达式\%> 渲染变量<\%=变量l\%> 这里的\是为了转义百分号防止webpack报错-->
    <% (cdnUrl => { %>
    <link rel="stylesheet" href="<%= cdnUrl %>" />
    <% }) %>
    <title><%=  %></title>
  </head>
  <body>
    <noscript>您的浏览器不支持JavaScript 请开启JavaScript再浏览</noscript>
    <div ></div>
  </body>
  <% (cdnUrl => { %>
  <script type="text/javascript" src="<%= cdnUrl %>"></script>
  <% }) %>
</html>

gzip压缩(NGINX要开启gzip解压)

先安装压缩插件compression-webpack-plugin:

yarn add compression-webpack-plugin -D

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const webpackConfig = {
    webpack: {
        configure(webpackConfig, { env, paths }){
          // 使用gzip压缩超过1M的js和css文件
          (
            new CompressionWebpackPlugin({
              algorithm: 'gzip',
              test: /\.(js|css)$/,
              threshold: 1024,
              minRatio: 0.8,
            })
          )
          return webpackConfig
        }
    }
}
 = webpackConfig;

混入全局scss文件

使用插件craco-sass-resources-loader处理全局scss,先安装:

yarn add craco-sass-resources-loader -D

const sassResourcesLoader = require('craco-sass-resources-loader')
const webpackConfig = {
    plugins: [
    {
      plugin: sassResourcesLoader, // 在所有scss文件加载前加载 全局加载到前面
      options: {
        // 配置多个文件 传文件的绝对路径
        resources: [
          (__dirname, 'src', 'styles', ''),
          (
            __dirname,
            'src',
            'styles',
            ''
          ),
          (__dirname, 'src', 'styles', ''),
        ],
      },
    },
  ],
}
 = webpackConfig;

 修改开发服务器端口

const webpackConfig = {
    devServer: {
        port: 8421,
    }
}
 = webpackConfig;

分析打包的js包体积

安装插件source-map-explorer(cra官方文档推荐插件)还有一款彩色的可视化插件:webpack-bundle-analyzer,安装插件

yarn add source-map-explorer -D

配置脚本:

注意: 要开sourcemap,否则执行会报错:export GENERATE_SOURCEMAP=true 加export导出变量到.env.环境文件 默认.文件环境变量是开启的GENERATE_SOURCEMAP=true

{
    "scripts": {
    "dev": "craco start",
    "build": "craco build",
    "buildServe": "craco build && serve -s dist",
    "analyze": "export GENERATE_SOURCEMAP=true && yarn build && source-map-explorer dist/static/js/*.js"
  },
}

完整代码:

const path = require('path')
const sassResourcesLoader = require('craco-sass-resources-loader')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const { getPlugin, pluginByName, whenProd } = require('@craco/craco')
const config = {
  devServer: {
    port: 8421,
  },
  webpack: {
    alias: {
      'geek-pc': (__dirname, 'src'),
    },
    configure: (webpackConfig, { env, paths }) => {
       = 'dist' // 修改打包输出文件目录
       = {
        ...,
        path: (__dirname, 'dist'), // 修改打包输出文件目录 两步都要写
        publicPath: whenProd(() => '/', '/'), // 静态资源publicpath
      }
      // 线上替换cdn key:value key为库的名字 value为umd模块导出到global对象的key名
      whenProd(() => {
         = {
          react: 'React',
          'react-dom': 'ReactDOM',
          history: 'History',
          'react-router-dom': 'ReactRouterDOM',
          redux: 'Redux',
          'react-redux': 'ReactRedux',
          dayjs: 'dayjs',
          antd: 'antd',
          axios: 'axios',
          '@ant-design/icons': 'icons',
        }
      })
      // 根据插件名获取插件 返回是否找到和匹配的插件
      const { isFound: isHtmlWebpackPluginFound, match: htmlWebpackPlugin } =
        getPlugin(webpackConfig, pluginByName('HtmlWebpackPlugin'))
      if (isHtmlWebpackPluginFound) {
         = whenProd(
          () => '生产环境',
          '开发环境'
        )
        // cdnurl要按照库的相互依赖优先级填写 被依赖的写前面优先加载
         = whenProd(
          () => ({
            js: [
              '/ajax/libs/react/18.2.0/umd/',
              '/npm/react-router-dom@5.3.0/umd/',
              '/ajax/libs/history/4.9.0/',
              '/ajax/libs/react-dom/18.2.0/umd/',
              '/ajax/libs/redux/4.2.0/',
              '/ajax/libs/react-redux/8.0.5/',
              '/ajax/libs/dayjs/1.11.7/',
              '/ajax/libs/antd/5.1.6/',
              '/ajax/libs/axios/1.2.5/',
              '/ajax/libs/ant-design-icons/5.0.1/',
            ],
            css: ['/ajax/libs/antd/5.1.6/'],
          }),
          // 本地环境设为空 防止页面遍历报错
          {
            js: [],
            css: [],
          }
        )
      }
      // 使用gzip压缩超过1M的js和css文件
      (
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: /\.(js|css)$/,
          threshold: 1024,
          minRatio: 0.8,
        })
      )
      return webpackConfig
    },
  },
  plugins: [
    {
      plugin: sassResourcesLoader, // 在所有scss文件加载前加载 全局加载到前面
      options: {
        // 配置多个文件 传文件的绝对路径
        resources: [
          (__dirname, 'src', 'styles', ''),
          (
            __dirname,
            'src',
            'styles',
            ''
          ),
          (__dirname, 'src', 'styles', ''),
        ],
      },
    },
  ],
}
 = config

移动端适配

yarn add postcss-px-to-viewport-8-plugin -D

const PostCssPxToViewportPlugin = require('postcss-px-to-viewport-8-plugin') // 针对版本生效的插件
 = {
  style: {
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [
            'postcss-px-to-viewport-8-plugin',
            PostCssPxToViewportPlugin({
              viewportWidth: 375, // 视口宽度
              viewportUnit: 'vmin', // px转换后的单位
              fontViewportUnit: 'vmin', // 字体转换后的单位
            }),
          ],
        },
      },
    },
  },
}

相关文章