008-ant design roadhogrc 打包
一、概述
1.1、官方地址以及说明
由于 Ant Design Pro 底层使用的 roadhog 工具,已经将复杂的流程封装完毕,对于大部分场景,构建打包文件只需要一个命令 roadhog build
,构建打包成功之后,会在根目录生成 dist
文件夹,里面就是构建打包好的文件,通常是 ***.js
、***.css
、index.html
等静态文件。
意思是使用默认package.json中的build即可
1.2、定制化打包
通过设置.webpackrc.js实现定制化打包。内部参数设置
开发线上区分
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
"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/