liangxinwei_roadhog
v1.0.31
Published
Cli tool for serve and build react app, based on roadhog, support JSON pattern config.
Downloads
47
Maintainers
liangxinweiReadme
liangxinwei_roadhog
基于作者 sorrycc 的 roadhog 的 1.3.* 的扩展，仅适用于我们自己的项目
安装
$ npm i liangxinwei_roadhog --save-dev使用
同 roadhog
配置文件如下：
{
"entry": "src/index.js",
"extraBabelPlugins": [
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties",
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
],
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr"
]
}
},
"useDll": false,
"dllPlugin": {
"exclude": [
"antd",
"babel-runtime"
]
},
"compress": {
"drop_console": true
},
"externals": {
"@antv/data-set": "DataSet",
"moment": "moment"
},
"ignoreMomentLocale": true,
"theme": "./src/theme.js",
"hash": true
}我们项目中用到了 @antv/data-set、moment 等一些大的 js 库，所以把它们都配置到 externals，将 @antv/data-set、moment 配置到 root/public/js 下，如果有引入顺序的需求，请给文件名设置数字前缀。
在项目的 index.ejs 下引入 css 和 js 文件：
<head>
<% var stylesheets = htmlWebpackPlugin.options.stylesheets || [] %>
<% for(var i = 0; i < stylesheets.length; i++) { %>
<link rel="stylesheet" href="<%= stylesheets[i] %>">
<% } %>
</head>
<body>
<% var scripts = htmlWebpackPlugin.options.scripts || [] %>
<% for(var i = 0; i < scripts.length; i++) { %>
<script type="text/javascript" src="<%= scripts[i] %>"></script>
<% } %>
</body>roadhog 作者约定 public 目录下的文件会在 server 和 build 时被自动 copy 到输出目录（默认是 ./dist）下，所以可以在这里存放 favicon, iconfont, html, html 里引用的图片等。htmlWebpackPlugin.options.stylesheets 和 htmlWebpackPlugin.options.scripts 是 roadhog 约定的 root/public/ 下存放 js 和 css 的文件夹下所有后缀名为 js 和 css 的文件列表，会自动挂载到 htmlWebpackPlugin 下，直接在 index.ejs 引入就行。
例如：
├── public 静态资源目录，会直接复制到 dist 目录下，使用时需要绝对路径引入
| ├── js js 文件
| | |── 0_moment.min.js
| | └── 1_data-set.min.js
| ├── stylesheets css 文件
| | └── test.cssLICENSE
MIT