Liangxinwei_roadhog NPM

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.css