@wgoo/cli/lib/config/webpack.site.dev.js

Wgoo Cli 是一个 React 组件库构建工具，通过 Wgoo Cli 可以快速搭建一套功能完备的 React 组件库。

const WebpackBar = require('webpackbar');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { join } = require('path');
const { merge } = require('webpack-merge');
const { baseConfig } = require('./webpack.base');
const { getWgooConfig, getWebpackConfig } = require('../common');
const { CliSitePlugin } = require('../compiler/cli-site-plugin');
const {
  GREEN,
  SITE_MODILE_SHARED_FILE,
  SITE_DESKTOP_SHARED_FILE,
} = require('../common/constant');

function getSiteDevBaseConfig() {
  const wgooConfig = getWgooConfig();

  function getSiteConfig() {
    const siteConfig = wgooConfig.site;

    if (siteConfig.locales) {
      return siteConfig.locales[siteConfig.defaultLang || 'zh-CN'];
    }

    return siteConfig;
  }

  /**
   * 
   * @param {*} config = { title: string; description?: string }
   */
  function getTitle(config) {
    let { title } = config;

    if (config.description) {
      title += ` - ${config.description}`;
    }

    return title;
  }

  const siteConfig = getSiteConfig();
  const title = getTitle(siteConfig);
  const { htmlPluginOptions } = wgooConfig.site;

  return merge(baseConfig, {
    entry: {
      'site-desktop': [join(__dirname, '../../site/desktop/main.js')],
      'site-mobile': [join(__dirname, '../../site/mobile/main.js')],
    },
    devServer: {
      port: 8080,
      quiet: true,
      host: '0.0.0.0',
      stats: 'errors-only',
      publicPath: '/',
      disableHostCheck: true,
    },
    resolve: {
      alias: {
        'site-mobile-shared': SITE_MODILE_SHARED_FILE,
        'site-desktop-shared': SITE_DESKTOP_SHARED_FILE,
      },
    },
    output: {
      chunkFilename: '[name].js',
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          chunks: {
            chunks: 'all',
            minChunks: 2,
            minSize: 0,
            name: 'chunks',
          },
        },
      },
    },
    plugins: [
      new WebpackBar({
        name: '@wgoo/cli',
        color: GREEN,
      }),
      new CliSitePlugin(),
      new HtmlWebpackPlugin({
        title,
        logo: siteConfig.logo,
        description: siteConfig.description,
        chunks: ['chunks', 'site-desktop'],
        template: join(__dirname, '../../site/desktop/index.html'),
        filename: 'index.html',
        ...htmlPluginOptions,
      }),
      new HtmlWebpackPlugin({
        title,
        logo: siteConfig.logo,
        description: siteConfig.description,
        chunks: ['chunks', 'site-mobile'],
        template: join(__dirname, '../../site/mobile/index.html'),
        filename: 'mobile.html',
        ...htmlPluginOptions,
      }),
    ],
  });
}

function getSiteDevConfig() {
  return getWebpackConfig(getSiteDevBaseConfig());
}

module.exports = {
  getSiteDevBaseConfig,
  getSiteDevConfig,
}