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

module.exports = (isEnvDevelopment, srcPath) => {
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment ? 'style-loader' : {
        loader: MiniCssExtractPlugin.loader,
      },
      {
        loader: 'css-loader',
        options: Object.assign(
          {},
          cssOptions,
          {
            sourceMap: !isEnvDevelopment,
          },
        ),
      },
    ].filter(Boolean)
    if (preProcessor) {
      loaders.push({
        loader: preProcessor,
        options: { sourceMap: !isEnvDevelopment },
      })
    }
    return loaders
  }

  return [
    {
      test: /\.css$/,
      use: getStyleLoaders({ importLoaders: 1 }),
    },
    {
      test: /\.scss$/,
      use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
    },
    {
      test: /\.(png|jpe?g|gif|svg)$/,
      loader: 'file-loader',
      options: {
        name: 'assets/images/[name].[ext]',
      },
    },
    {
      test: /\.(ttf|otf|eot|woff2?)$/,
      loader: 'file-loader',
      options: {
        name: 'assets/fonts/[name].[ext]',
      },
    },
    {
      test: /\.(m?js|vue)$/,
      enforce: 'pre',
      include: srcPath,
      loader: 'eslint-loader',
      options: {
        formatter: require('eslint-friendly-formatter'),
      },
    },
    {
      test: /\.m?js$/,
      include: srcPath,
      loader: 'babel-loader',
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader',
    },
  ]
}