一、概述

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

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 打包的更多相关文章

  1. Ant design 项目打包后报错:"Menu(or Flex) is not defined"

    我的项目使用了ant-design 和 ant-design-mobile,在测试环境上没问题,但是打包发布之后控制台报错 Menu is not defined Flex is not define ...

  2. 前端自动分环境打包(vue和ant design)

    现实中的问题:有时候版本上线的时候,打包时忘记切换环境,将测试包推上正式服务器,那你就会被批了. 期望:在写打包的命令行的时候就觉得自己在打包正式版本,避免推包时候的,不确信自己的包是否正确. 既然有 ...

  3. 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

    拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

  4. Ant Design Pro快速入门

    在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...

  5. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行

    ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以 ...

  6. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  7. ant design pro (十一)advanced Mock 和联调

    一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...

  8. ant design pro (八)构建和发布

    一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...

  9. ant design pro (七)和服务端进行交互

    一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟 ...

随机推荐

  1. 《Lua程序设计》第6章 深入函数 学习笔记

    在Lua中,函数是一种“第一类值(First-Class Value)”,它们具有特定的词法域(Lexical Scoping).“词法域”:函数可以潜逃在另一个函数中,内部的函数可以访问外部函数中的 ...

  2. 使用API函数EnumWindows()枚举顶层窗口

      http://simpleease.blog.163.com/blog/static/1596085820052770290/ 要枚举Windows当前所有打开的顶层窗口,可使用Windows A ...

  3. linux 查看版本

    输入"uname -a ",可显示电脑以及操作系统的相关信息. 输入"cat /proc/version",说明正在运行的内核版本.输入"cat /e ...

  4. 【H5】使用h5实现复制粘贴功能

    方案一 : 可满足大部分浏览器正常使用 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. 【Spring Boot&&Spring Cloud系列】Spring Boot中使用NoSql数据库Redis

    github地址:https://github.com/AndyFlower/Spring-Boot-Learn/tree/master/spring-boot-nosql-redis 一.加入依赖到 ...

  6. 2-3 vue配置介绍

    一.通过vue-cli构建的项目的文件介绍 1.bulid文件夹 ==> 项目打包的配置文件夹 2.config文件夹 ==> 打包的配置 3.src文件夹 ==> 项目开发的源码 ...

  7. Google浏览器清除缓存快捷键

    1.CTRL+SHIFT+DEL:直接进入“清除浏览数据”页面,包括清除浏览历史记录.清空缓存.删除Cookie等. 2.chrome浏览器F12中 ctrl+p 可以定位文件

  8. Artech的MVC4框架学习——第二章URL路由

    总结:HttpModule 和HttpHandler是Asp.net管道的两个重要组件.请求最终处理通过HttpHandler完成.MVC就是通过名为MvcHandler自定义HttpHandler现 ...

  9. 2016中国app年度排行榜:十大行业、25个领域、Top 500 和2017趋势预测

    本文为猎豹全球智库联合猎豹移动大数据平台libra.科技顶尖媒体36kr联合发布,如需转载必须在文章开头注明“来源:猎豹全球智库”和作者姓名,且不得更改或增删文中所有信息. 本文作者:猎豹全球智库 容 ...

  10. visual studio 2013设置背景图片

    今天听了公司的一个经验分享会,发现VS竟然可以设置背景图片!还是个萌妹子!!被萌了一脸鼻血!!! 设置方法很简单:安装扩展ClaudiaIDE 1.在这里下载扩展,https://visualstud ...