How to use af-webpack - 10 common examples

const { cwd = process.cwd(), entry } = opts;

  const babel = resolve(__dirname, './babel.js');
  const paths = getPaths(cwd);

  // register babel for config files
  registerBabel(babel, {
    cwd,
    configOnly: true,
  });

  // get user config
  let config = null;
  let returnedWatchConfig = null;
  try {
    const configObj = getConfig({ cwd });
    ({ config } = configObj);
    returnedWatchConfig = configObj.watch;
    debug(`user config: ${JSON.stringify(config)}`);
  } catch (e) {
    console.error(chalk.red(e.message));
    debug('Get .webpackrc config failed, watch config and reload');

    // 监听配置项变更，然后重新执行 dev 逻辑
    watchConfigs().on('all', (event, path) => {
      debug(`[${event}] ${path}, unwatch and reload`);
      unwatchConfigs();
      runDev(opts);
    });
    return;
  }

});

  // get user config
  let config = null;
  let returnedWatchConfig = null;
  try {
    const configObj = getConfig({ cwd });
    ({ config } = configObj);
    returnedWatchConfig = configObj.watch;
    debug(`user config: ${JSON.stringify(config)}`);
  } catch (e) {
    console.error(chalk.red(e.message));
    debug('Get .webpackrc config failed, watch config and reload');

    // 监听配置项变更，然后重新执行 dev 逻辑
    watchConfigs().on('all', (event, path) => {
      debug(`[${event}] ${path}, unwatch and reload`);
      unwatchConfigs();
      runDev(opts);
    });
    return;
  }

  // get webpack config
  const webpackConfig = getWebpackConfig({
    cwd,
    config,
    babel,
    paths,
    entry,
  });

!('chainConfig' in afWebpackOpts),
    `chainConfig should not supplied in modifyAFWebpackOpts`,
  );
  afWebpackOpts.chainConfig = webpackConfig => {
    service.applyPlugins('chainWebpackConfig', {
      args: webpackConfig,
    });
    if (config.chainWebpack) {
      config.chainWebpack(webpackConfig, {
        webpack: require('af-webpack/webpack'),
      });
    }
  };

  const webpackConfig: IWebpack.Configuration = service.applyPlugins('modifyWebpackConfig', {
    initialValue: getConfig({
      ...afWebpackOpts,
      ssr,
    }),
  });

  if (ssr) {
    // ssr in beta hint
    console.warn(
      chalk.keyword('orange')(
        `WARNING: UmiJS SSR is still in beta, you can open issues or PRs in https://github.com/umijs/umi`,
      ),
    );
    const nodeExternalsOpts = {
      whitelist: [
        /\.(css|less|sass|scss)$/,
        /^umi(\/.*)?$/,

args => {
      // eslint-disable-next-line import/no-dynamic-require
      const pkg = require(join(process.env.UMI_DIR, 'package.json'));
      if (args.verbose) {
        const versions = api.applyPlugins('addVersionInfo', {
          initialValue: [
            `umi@${pkg.version}`,
            `${process.platform} ${process.arch}`,
            `node@${process.version}`,
            `umi-build-dev@${require('../../../package').version}`,
            `af-webpack@${require('af-webpack/package').version}`,
            `babel-preset-umi@${require('babel-preset-umi/package').version}`,
            `umi-test@${require('umi-test/package').version}`,
          ],
        });
        versions.forEach(version => {
          console.log(version);
        });
      } else {
        console.log(pkg.version);
      }
      if (existsSync(join(process.env.UMI_DIR, '.local'))) {
        console.log(chalk.cyan('@local'));
      }
    },
  );

const filesGenerator = getFilesGenerator(service, {
        RoutesManager,
        mountElementId: config.mountElementId,
      });
      filesGenerator.generate();

      if (process.env.HTML !== 'none') {
        const HtmlGeneratorPlugin = require('../getHtmlGeneratorPlugin').default(
          service,
        );
        // move html-webpack-plugin to the head, so that other plugins (like workbox-webpack-plugin)
        // which listen to `emit` event can detect assets
        service.webpackConfig.plugins.unshift(new HtmlGeneratorPlugin());
      }

      require('af-webpack/build').default({
        cwd,
        webpackConfig: service.webpackConfig,
        onSuccess({ stats }) {
          debug('Build success');
          if (process.env.RM_TMPDIR !== 'none') {
            debug(`Clean tmp dir ${service.paths.tmpDirPath}`);
            rimraf.sync(paths.absTmpDirPath);
          }
          service.applyPlugins('onBuildSuccess', {
            args: {
              stats,
            },
          });
          debug('Build success end');
        },
        onFail({ err, stats }) {

.then(() => {
                debug('start dev server with af-webpack/dev');
                const { history = 'browser' } = service.config;
                require('af-webpack/dev').default({
                  cwd,
                  port,
                  history: typeof history === 'string' ? history : history[0],
                  base: service.config.base,
                  webpackConfig: service.webpackConfig,
                  proxy: service.config.proxy || {},
                  contentBase: './path-do-not-exists',
                  _beforeServerWithApp(app) {
                    // @private
                    service.applyPlugins('_beforeServerWithApp', { args: { app } });
                  },
                  beforeMiddlewares: service.applyPlugins('addMiddlewareAhead', {
                    initialValue: [
                      ...(service.ssrWebpackConfig
                        ? [
                            require('af-webpack/webpack-dev-middleware')(

import getUserConfigPlugins from 'af-webpack/getUserConfigPlugins';
import { compatDirname } from 'umi-utils';
import { join, dirname } from 'path';
import { webpackHotDevClientPath } from 'af-webpack/react-dev-utils';

const plugins = getUserConfigPlugins();

function noop() {
  return true;
}

const excludes = ['entry', 'outputPath'];

export default function(api) {
  const { debug, cwd, config, paths } = api;

  // 把 af-webpack 的配置插件转化为 umi-build-dev 的
  api._registerConfig(() => {
    return plugins
      .filter(p => !excludes.includes(p.name))
      .map(({ name, validate = noop, ...extraOpts }) => {
        return api => ({

}),
    new BigBrother({
      cwd,
      tool: {
        name: 'roadhog',
        version: roadhogPkg.version,
        stagesPath,
      },
    }),
  );

  function onCompileDone() {
    notify.onDevComplete({ name: 'roadhog', version: '2-beta' });
  }

  dev({
    webpackConfig,
    proxy: config.proxy || {},
    beforeServer(devServer) {
      try {
        applyMock(devServer);
      } catch (e) {
        console.log(e);
      }
    },
    afterServer(devServer) {
      returnedWatchConfig(devServer);
    },
    openBrowser: true,
    onCompileDone() {
      once(onCompileDone);
    },

function restart(why) {
  if (devServer) {
    clearConsole();
    console.log(chalk.green(`Since ${why}, try to restart server`));
    unwatch();
    devServer.close();
    process.send({ type: 'RESTART' });
  }
}

const config = service.webpackConfig;

      let res;
      if (args.rule) {
        res = config.module.rules.find(r => r.__ruleNames[0] === args.rule);
      } else if (args.plugin) {
        res = config.plugins.find(p => p.__pluginName === args.plugin);
      } else if (args.rules) {
        res = config.module.rules.map(r => r.__ruleNames[0]);
      } else if (args.plugins) {
        res = config.plugins.map(p => p.__pluginName || p.constructor.name);
      } else {
        res = config;
      }

      const output = webpackChain.toString(res, { verbose });
      console.log(output);
    },
  );