学习roadhog

最新推荐文章于 2021-02-19 17:19:01 发布

fire-fire-fox

最新推荐文章于 2021-02-19 17:19:01 发布

阅读量786

点赞数

本文链接：https://blog.csdn.net/wangrong111222/article/details/91127832

版权

roadhog 是一个 cli 工具，提供 server、 build 和 test 三个命令，分别用于本地调试和构建，并且提供了特别易用的 mock 功能。命令行体验和 create-react-app 一致，配置略有不同，比如默认开启 css modules，然后还提供了 JSON 格式的配置方式。内置在dva中；umi 就是基于roadhog 封装的

安装

npm i -g roadhog

由于内置在了dva中，学习一下在dva中使用roadhog的技巧；

使用 dva new myapp ; cd myapp 来创建并且进入app

在package.json可以看到如下代码，可以看出本身dva项目就是使用roadhog来进行开发和打包的，

"scripts": {
    "start": "roadhog server",
    "build": "roadhog build",
    "lint": "eslint --ext .js src test",
    "precommit": "npm run lint"
  },

roadhog的配置文件是 .webpackrc /.webpackrc.js 两种文件配置

启动如过报错记得修改 roadhog的版本为 2.5.0-beta.4

配置 .webpack 多入口/页面

默认的入口 index.js

1， init

{
}

2，替换成

{
  "entry": "./src/index.js"
}

发现其实没有变化

3，接下来替换成 test.js

// test.js

console.log('test') 



// .webpackrc 


{
  "entry": "./src/test.js"
}

页面白了

但是http://localhost:8000/test.js

确实打包成了bundle了,可以被访问

4，继续修改为两个多入口文件

// .webpackrc

{
   "entry": {
    "index":"./src/index.js",
    "test123":"./src/test.js"
   }
 }

访问 http://localhost:8000/index.js，http://localhost:8000/test123.js

就是可以访问这些key这些资源了

这个入口的意思就是说相关的入口js会被打包成key的一个js资源，为页面所用，

5 ，我们在public下继续创建一个 test.html

然后引入 test123.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="test123.js"></script>
</body>
</html>

然后访问 http://localhost:8000/test.html, 就可以看到这个打印结果了，

这样就打包成多页面了

配置代理 proxy在.webpackrc 中

"proxy": {
       "/api": {
         "target": "https://api.douban.com/",
         "changeOrigin": true,
         "pathRewrite":{"^/api":""}
       }
     }