aihub-web/config/loader.dev.js

/* eslint-disable import/no-extraneous-dependencies */
const path = require('path');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const paths = require('./paths');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(paths.appSrc, 'styles/ant-default.less'), 'utf8'));
const iconPath = path.relative('./~/antd/lib/style/*', './src/styles/iconfont/antd-font/iconfont');
//const iconPathNew = iconPath.replace(/\\/g, '//');
//themeVariables['@icon-url'] = `'${iconPath}'`;

const eslintLoader = {
  test: /\.(js|jsx)$/,
  enforce: 'pre',
  exclude: /node_modules/,
  include: paths.appSrc,
  use: [
    {
      loader: 'eslint-loader',
      options: {
        // Pass the formatter:
        formatter: eslintFormatter,
      },
    },
  ],
};
// js & jsx loader
const jsLoader = {
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  exclude: /node_modules/,
  loader: require.resolve('babel-loader'),
  options: {
    cacheDirectory: true,
    babelrc: true,
  },
};

const postCssLoaderConfig = {
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    sourceMap: true,
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ],
        flexbox: 'no-2009',
      }),
    ],
  },
};

const cssLoaderConfig = {
  loader: 'css-loader',
  options: {
    sourceMap: true,
    importLoaders: 1,
  },
};

const cssMoudleLoaderConfig = {
  loader: 'css-loader',
  options: {
    modules: false,
    sourceMap: true,
    importLoaders: 1,
    localIdentName: '[name]__[local]___[hash:base64:5]',
  },
};

const sassLoaderConfig = {
  loader: require.resolve('sass-loader'),
  options: {
    sourceMap: true,
  },
};

const lessLoaderConfig = {
  loader: 'less-loader',
  options: {
    modifyVars: themeVariables,
    javascriptEnabled: true,
  },
};

const cssLoaderRule = {
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, cssLoaderConfig, postCssLoaderConfig, { loader: 'resolve-url-loader' }],
};

const scssLoaderRule = {
  test: /\.(scss|sass)$/,
  use: [{ loader: 'style-loader' }, cssLoaderConfig, { loader: 'resolve-url-loader' }, sassLoaderConfig],
};

const lessLoaderRule = {
  test: /\.(less)$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, postCssLoaderConfig, lessLoaderConfig],
};

// svg图标  loader
const svgSpriteLoader = {
  test: /\.(pdf|svg)$/,
  loader: 'svg-sprite-loader',
  include: [path.resolve('src/styles/iconsvg')],
  options: {
    symbolId: 'icon-[name]',
  },
};
// font图标  loader
const fontWoffLoader = {
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  // use: 'url-loader?limit=10000&mimetype=application/font-woff',
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10000,
        mimetype: 'application/font-woff',
        name: 'assets/images/[name].[hash:7].[ext]',
      },
    },
  ],
};
// font图标  loader
const fontTtfLoader = {
  test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  exclude: [path.resolve('src/styles/iconsvg')],
  use: [
    {
      loader: 'file-loader',
      options: {
        name: 'assets/images/[name].[hash:7].[ext]',
      },
    },
  ],
};
// image图片资源  loader
const imageLoader = {
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  exclude: [path.resolve('src/styles/iconsvg')],
  loader: 'file-loader',
  options: {
    name: 'assets/images/[name].[hash:7].[ext]',
  },
  // use: [
  //   (loader: 'file-loader'),
  //   {
  //     // image-webpack-loader 插件安装老出问题。
  //     loader: 'image-webpack-loader',
  //     options: {
  //       name: 'assets/images/[name].[hash:7].[ext]',
  //       optipng: {
  //         optimizationLevel: 7,
  //       },
  //       gifsicle: {
  //         interlaced: false,
  //       },
  //       pngquant: {
  //         quality: [0.65, 0.9],
  //         speed: 4,
  //       },
  //       mozjpeg: {
  //         quality: 65,
  //         progressive: true,
  //       },
  //     },
  //   },
  // ],
};
const mediaLoader = {
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: 'assets/media/[name].[hash:7].[ext]',
  },
};
// 其他默认  loader
const otherLoader = {
  exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
  loader: require.resolve('file-loader'),
  options: {
    name: 'assets/media/[name].[hash:7].[ext]',
  },
};

module.exports = {
  eslintLoader,
  jsLoader,
  postCssLoaderConfig,
  cssLoaderConfig,
  cssMoudleLoaderConfig,
  sassLoaderConfig,
  lessLoaderConfig,
  cssLoaderRule,
  scssLoaderRule,
  lessLoaderRule,
  svgSpriteLoader,
  fontWoffLoader,
  fontTtfLoader,
  imageLoader,
  mediaLoader,
  otherLoader,
};