@wgoo/cli/lib/config/webpack.base.js

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

const sass = require('sass');
const webpack = require('webpack');
const FriendlyErrorsPlugin = require('@nuxt/friendly-errors-webpack-plugin');
const path = require('path');
const {
  STYLE_EXTS,
  SCRIPT_EXTS,
  POSTCSS_CONFIG_FILE,
} = require('../common/constant');

const DEV = process.env.NODE_ENV === 'development';

const CSS_LOADERS = [
  'style-loader',
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: require(POSTCSS_CONFIG_FILE),
    },
  },
];

const plugins = [
  new webpack.DefinePlugin({
    __WGOO_OPTIONS_API__: 'true',
    __WGOO_PROD_DEVTOOLS__: 'false',
  }),
  new FriendlyErrorsPlugin({
    clearConsole: false,
    logLevel: 'WARNING',
  }),
];

const baseConfig = {
  mode: 'development',
  resolve: {
    extensions: [...SCRIPT_EXTS, ...STYLE_EXTS],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|jsx|tsx)$/,
        exclude: /node_modules\/(?!(@wgoo\/cli))/,
        use: [{
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            }
          }],
      },
      {
        test: /\.css$/,
        sideEffects: true,
        use: CSS_LOADERS,
      },
      {
        test: /\.less$/,
        sideEffects: true,
        use: [...CSS_LOADERS, 'less-loader'],
      },
      {
        test: /\.scss$/,
        sideEffects: true,
        use: [
          ...CSS_LOADERS,
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
            },
          },
        ],
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus() - 1,
              workerParallelJobs: 10,
              workerNodeArgs: ['--max-old-space-size=1024'],
              poolRespawn: !DEV,
              poolTimeout: DEV ? Infinity : 500,
              poolParallelJobs: 50,
              name: 'md-pool',
            },
          },
          'babel-loader',
          {
            loader: 'react-markdown-doc-loader',
            options: {
              jsTemplate: path.resolve(__dirname, '../../react-template.jstpl'),
              renderers: {
                markdown: 'Markdown',
                style: 'Style',
                demo: 'Demo',
              },
            },
          },
          'markdown-doc-loader',
        ],
      },
    ],
  },
  plugins,
  // cache: {
  //   type: 'filesystem',
  //   buildDependencies: {
  //     config: [__filename],
  //   },
  // },
};

module.exports = { baseConfig };