008-ant design roadhogrc 打包

1、概述

1.一、官方地址以及說明

　　因爲 Ant Design Pro 底層使用的 roadhog 工具，已經將複雜的流程封裝完畢，對於大部分場景，構建打包文件只須要一個命令 roadhog build，構建打包成功以後，會在根目錄生成 dist 文件夾，裏面就是構建打包好的文件，一般是 ***.js、***.css、index.html 等靜態文件。

　　意思是使用默認package.json中的build便可

1.二、定製化打包

　　經過設置.webpackrc.js實現定製化打包。內部參數設置

開發線上區分

"env": {
  // 開發環境
  "development": {
    "extraBabelPlugins": [
      "dva-hmr",
    ]
  },
  // build 時的生產環境
  "production": {
    "extraBabelPlugins": [
      "transform-runtime",
      "transform-decorators-legacy",
      ["import", { "libraryName": "antd", "style": true }]
    ]
  }
},

View Code

1.三、針對文件目錄定製化.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.四、探究

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

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

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