008-ant design roadhogrc 打包

1、概述

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

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

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

1.二、定製化打包

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

開發線上區分git

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

1.三、針對文件目錄定製化.webpackrc.js

其實主要是設置.webpackrc.jsgithub

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

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

經常使用配置:數組

  publicPath

    配置 webpack 的 output.publicPath 屬性。antd

  outputPath

    配置 webpack 的?output.path?屬性。ide

  copy

    定義須要單純作複製的文件列表,格式爲數組,項的格式參考 copy-webpack-plugin 的配置。

    好比:

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

1.四、探究

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

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

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

相關文章
相關標籤/搜索