igroot-builder/config/rules.js

白山——zeus系统前端打包工具

const path = require('path')
// const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const { resolveAssets } = require('../utils')
const { options: { sourceMap, esModule, theme, useAntd } } = require('../bsy')

const isDev = process.env.NODE_ENV === 'development'

const css = {
  regexp: /\.css$/,
  moduleRegexp: /\.module\.css$/,
  loader: (option = {}) => [
    // isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        sourceMap: !isDev && sourceMap,
        ...option
      }
    },

    // postcss-loader, 用于在 CSS 中自动添加内核前缀
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('autoprefixer')({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9' // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009'
          })
        ]
      }
    }
  ]
}

const less = {
  regexp: /\.less$/,
  moduleRegexp: /\.module\.less$/,
  loader: modules => loaderGenerator('less', {
    modifyVars: theme,
    javascriptEnabled: true,
    sourceMap: !isDev && sourceMap
  }, { modules, importLoaders: 2 })
}

const sass = {
  regexp: /\.(sass|scss)$/,
  moduleRegexp: /\.module\.(sass|scss)$/,
  loader: modules => loaderGenerator('sass', { sourceMap: !isDev && sourceMap }, { modules, importLoaders: 2 })
}

function loaderGenerator(type, options, cssLoaderOptions) {
  return [
    ...css.loader(cssLoaderOptions),
    { loader: `${type}-loader`, options }
  ]
}

module.exports = [
  {
    test: /\.(js|ts)x?$/,
    include: [
      path.resolve('src'),
      require.resolve('../asyncComponent.jsx'),
      ...esModule.map(component => path.resolve(`node_modules/${component}`))
    ],
    use: [{
      loader: 'babel-loader',
      options: {
        cwd: __dirname,
        babelrc: false,
        compact: !isDev,
        presets: [
          ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
          '@babel/preset-env',
          ['@babel/preset-react', { development: isDev }]
        ],
        plugins: [
          '@babel/plugin-syntax-dynamic-import',
          ['@babel/plugin-proposal-decorators', { legacy: true }],
          ['@babel/plugin-proposal-class-properties', { loose: true }],
          ['@babel/plugin-proposal-private-methods', { loose: true }],
          ['import', {
            libraryName: useAntd ? 'antd' : 'igroot',
            style: theme ? true : 'css'
          }],
          ['import', { 'libraryName': '@formily/antd', 'libraryDirectory': 'lib' }, '@formily/antd']
        ],
        // exclude: '/node_modules/'
      },
    }]
  },

  {
    test: css.regexp,
    exclude: css.moduleRegexp,
    use: css.loader()
  },

  {
    test: css.moduleRegexp,
    use: css.loader({ modules: true })
  },

  {
    test: less.regexp,
    exclude: less.moduleRegexp,
    use: less.loader()
  },

  {
    test: less.moduleRegexp,
    use: less.loader(true)
  },

  {
    test: sass.regexp,
    exclude: sass.moduleRegexp,
    use: sass.loader()
  },

  {
    test: sass.moduleRegexp,
    use: sass.loader(true)
  },

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    type: 'asset',
    // webpack5 将按照默认条件，自动地在 resource 和 inline 之间进行选择：
    // 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
    generator: {
      filename: 'assets/[hash:8].[name][]ext',
    }
  },

  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    type: 'asset',
    generator: {
      filename: 'assets/[hash:8].[name][]ext',
    }
  }
]