008-ant design roadhogrc 打包

Posted 2021-01-02 bjlhx

一、概述

1.1、官方地址以及说明

　　由于 Ant Design Pro 底层使用的 roadhog 工具，已经将复杂的流程封装完毕，对于大部分场景，构建打包文件只需要一个命令 roadhog build，构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js、***.css、index.html 等静态文件。

　　意思是使用默认package.json中的build即可

1.2、定制化打包

　　通过设置.webpackrc.js实现定制化打包。内部参数设置

开发线上区分

"env": {
  // 开发环境
  "development": {
    "extraBabelPlugins": [
      "dva-hmr",
    ]
  },
  // build 时的生产环境
  "production": {
    "extraBabelPlugins": [
      "transform-runtime",
      "transform-decorators-legacy",
      ["import", { "libraryName": "antd", "style": true }]
    ]
  }
},

View Code

1.3、针对文件目录定制化.webpackrc.js

其实主要是设置.webpackrc.js

官方地址：https://github.com/sorrycc/roadhog 

中文地址：https://github.com/sorrycc/roadhog/blob/master/README_zh-cn.md

常用配置：

　　publicPath

　　　　配置 webpack 的 output.publicPath 属性。

　　outputPath

　　　　配置 webpack 的?output.path?属性。

　　copy

　　　　定义需要单纯做复制的文件列表，格式为数组，项的格式参考 copy-webpack-plugin 的配置。

　　　　比如：

"copy": [
  {    "from": "",    "to": ""  }
]

1.4、探究

　　查看可知，pro ant design 打包→roadhog 打包→webpack打包

　　webpack地址：https://webpack.js.org/configuration/

　　中文地址：https://webpack.docschina.org/concepts/