008-ant design roadhogrc 打包

一、概述

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 }]
    ]
  }
},

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/