1. 程式人生 > >008-ant design roadhogrc 打包

008-ant design roadhogrc 打包

常用 dev true read form closed 生產 ati http

一、概述

1.1、官方地址以及說明

  由於 Ant Design Pro 底層使用的 roadhog 工具,已經將復雜的流程封裝完畢,對於大部分場景,構建打包文件只需要一個命令 roadhog build,構建打包成功之後,會在根目錄生成 dist 文件夾,裏面就是構建打包好的文件,通常是 ***.js***.cssindex.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/


008-ant design roadhogrc 打包