roadhog依赖替换为webpack,基本完成。

.babelrc

+{
+  "presets": ["./tools/babel-preset"]
+}

.gitignore

 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+/.cache-loader
+
 # dependencies
 /node_modules
 

.roadhogrc.mock.js

-module.exports = require('./mock');

.storybook/.babelrc

 {
-  "presets": [
-    [
-      "umi",
-      { "browsers": ["ie >= 9"] }
-    ]
-  ],
-  "plugins": [
-    "dva-hmr",
-    "lodash",
-    ["import", { "libraryName": "antd", "style": true }]
-  ]
+  "presets": ["../tools/babel-preset"]
 }

.storybook/middleware.js

-
-require('../babel-register');
-const createProxy =  require('http-proxy-middleware');
+const createProxy = require('http-proxy-middleware');
 const forEach = require('lodash/forEach');
-const assert = require('assert');
-
-const roadhog = require('../.webpackrc');
-const mock = require('../.roadhogrc.mock');
-
-function parseKey(key) {
-  let method = 'get';
-  let path = key;
-
-  if (key.indexOf(' ') > -1) {
-    const splited = key.split(' ');
-    method = splited[0].toLowerCase();
-    path = splited[1];
-  }
-
-  return { method, path };
-}
-
-function makeProxy(method, path, target) {
-  const filter = (pathname, req) => {
-    return path.test(pathname) && req.method === method.toUpperCase();
-  };
-  return createProxy(filter, { target });
-}
-
-function createMockHandler(value) {
-  return function mockHandler(...args) {
-    const res = args[1];
-    if (typeof value === 'function') {
-      value(...args);
-    } else {
-      res.json(value);
-    }
-  };
-}
+require('../babel-register');
+const proxy = require('../proxy');
+const mock = require('../mock');
+const applyMock = require('../tools/applyMock');
 
-module.exports = (router) => {
-  const proxy = roadhog.env.development.proxy;
+module.exports = (app) => {
   forEach(proxy, (value, key) => {
-    router.use(key, createProxy(key, value));
+    app.use(key, createProxy(key, value));
   });
-  forEach(mock, (value, key) => {
-    const parsedkey = parseKey(key);
-    assert(
-      typeof value === 'function' ||
-      typeof value === 'object' ||
-      typeof value === 'string',
-      `mock value of ${key} should be function or object or string, but got ${typeof value}`
-    );
-    if (typeof value === 'string') {
-      let path = parsedkey.path;
-      if (/\(.+\)/.test(parsedkey.path)) {
-        path = new RegExp(`^${parsedkey.path}$`);
-      }
-      router.use(
-        path,
-        makeProxy(parsedkey.method, path, value)
-      );
-    } else {
-      router[parsedkey.method](
-        parsedkey.path,
-        createMockHandler(value)
-      );
-    }
-  })
+  applyMock(app, mock);
 };

.storybook/webpack.config.js

-const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
-const path = require('path');
+let config;
 
-module.exports = (baseConfig, env) => {
-  const config = genDefaultConfig(baseConfig, env);
-
-  // Extend it as you need.
-
-  // For example, add typescript loader:
-  config.module.rules.push({
-    test: /\.less$/,
-    include: path.resolve(__dirname, '../src'),
-    use: [
-      require.resolve('style-loader'),
-      {
-        loader: require.resolve('css-loader'),
-        options: {
-          modules: true,
-        },
-      },
-      require.resolve('less-loader')
-    ],
-  }, {
-    test: /\.less$/,
-    exclude: path.resolve(__dirname, '../src'),
-    use: [
-      require.resolve('style-loader'),
-      require.resolve('css-loader'),
-      require.resolve('less-loader')
-    ],
-  });
+if (process.env.NODE_ENV === 'production') {
+  config = require('../webpack.prod');
+} else {
+  config = require('../webpack.dev');
+}
 
-  config.module.rules = config.module.rules.map(rule => {
-    if (`${rule.test}` === `${/\.md$/}`) {
-      return {
-        test: /\.md$/,
-        use: [
-          require.resolve('html-loader'),
-          require.resolve('highlight-loader'),
-          require.resolve('markdown-loader'),
-        ],
-      }
-    } else {
-      return rule;
-    }
-  });
-
-  return config;
+module.exports = (baseConfig, env) => {
+  baseConfig.resolve.extensions = config.resolve.extensions;
+  baseConfig.module.rules = config.module.rules;
+  return baseConfig;
 };

.webpackrc.js

-const config = require('./config');
-
-const proxy = {
-  target: "http://192.168.1.22:8080",
-  changeOrigin: true,
-  pathRewrite: {
-    "^/api": "/bm/api"
-  }
-};
-
-const resource_proxy = {
-  target: "http://192.168.1.22:8080",
-  changeOrigin: true,
-  pathRewrite: {
-    "^/resource": "/bm/resource"
-  }
-};
-
-module.exports = {
-  entry: "src/index.js",
-  html: {
-    title: 'base project',
-    template: "src/index.ejs",
-  },
-  theme: {
-    "layout-header-height": "48px",
-    "layout-header-background": "#fff",
-    "layout-footer-background": "#fff",
-    "layout-sider-background": '#404040',
-    'menu-dark-bg': '#404040',
-    "layout-header-padding": "0",
-  },
-  browserslist: ['ie >= 9'],
-  ignoreMomentLocale: true,
-  hash: true,
-  env: {
-    development: {
-      publicPath: config.dev.publicPath,
-      extraBabelPlugins: [
-        "dva-hmr",
-        "lodash",
-        ["import", { "libraryName": "antd", "style": true }]
-      ],
-      devtool: "cheap-module-eval-source-map",
-      proxy: {
-        "/api": proxy,
-        "/resource": resource_proxy,
-      }
-    },
-    production: {
-      publicPath: config.prod.publicPath,
-      extraBabelPlugins: [
-        "lodash",
-        ["import", { "libraryName": "antd", "style": true }]
-      ],
-      // devtool: "hidden-source-map"
-    }
-  }
-};

babel-register.js

 /* eslint-disable comma-dangle */
 const babel = require('@babel/register/lib/node');
+const path = require('path');
 
-babel.default(({
+babel.default({
   presets: [
-    ['umi', { browsers: ['ie >= 9'], commonjs: true }]
+    ['./tools/babel-preset', {
+      modules: 'commonjs',
+    }],
   ],
-  plugins: [
-    'lodash',
-    ['import', { libraryName: 'antd', style: true }]
-  ],
-}));
+  babelrc: false,
+  only: [
+    path.resolve(__dirname, 'src/**'),
+    path.resolve(__dirname, 'stories/**'),
+    path.resolve(__dirname, 'mock/**'),
+  ]
+});
+
+// require('@babel/runtime');
 
 module.exports = {
   unregister() {
@@ -18,3 +25,4 @@ module.exports = {
     });
   },
 };
+

cache.js

-/* eslint-disable */
-
-
-exports.__esModule = true;
-
-var _stringify = require("babel-runtime/core-js/json/stringify");
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
-exports.save = save;
-exports.load = load;
-exports.get = get;
-
-var _path = require("path");
-
-var _path2 = _interopRequireDefault(_path);
-
-var _fs = require("fs");
-
-var _fs2 = _interopRequireDefault(_fs);
-
-var _mkdirp = require("mkdirp");
-
-var _homeOrTmp = require("home-or-tmp");
-
-var _homeOrTmp2 = _interopRequireDefault(_homeOrTmp);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var FILENAME = process.env.BABEL_CACHE_PATH || _path2.default.join(_homeOrTmp2.default, ".babel.json");
-var data = {};
-
-function save() {
-  var serialised = "{}";
-
-  try {
-    serialised = (0, _stringify2.default)(data, null, "  ");
-  } catch (err) {
-
-    if (err.message === "Invalid string length") {
-      err.message = "Cache too large so it's been cleared.";
-      console.error(err.stack);
-    } else {
-      throw err;
-    }
-  }
-
-  (0, _mkdirp.sync)(_path2.default.dirname(FILENAME));
-  _fs2.default.writeFileSync(FILENAME, serialised);
-}
-
-function load() {
-  if (process.env.BABEL_DISABLE_CACHE) return;
-
-  process.on("exit", save);
-  process.nextTick(save);
-
-  if (!_fs2.default.existsSync(FILENAME)) return;
-
-  try {
-    data = JSON.parse(_fs2.default.readFileSync(FILENAME));
-  } catch (err) {
-    return;
-  }
-}
-
-function get() {
-  return data;
-}

mock.js → mock/index.js

 /* eslint-disable no-shadow */
 import moment from 'moment';
-import { genModules } from './src/mock/modules';
-import { getTasks } from './src/mock/tasks';
-import toFilters from './src/mock/filter';
+import { genModules } from '../src/mock/modules';
+import { getTasks } from '../src/mock/tasks';
+import toFilters from '../src/mock/filter';
 
 const modules = genModules();
 const tasks = getTasks();