rules.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  2. module.exports = (isEnvDevelopment, srcPath) => {
  3. const getStyleLoaders = (cssOptions, preProcessor) => {
  4. const loaders = [
  5. isEnvDevelopment ? 'style-loader' : {
  6. loader: MiniCssExtractPlugin.loader,
  7. },
  8. {
  9. loader: 'css-loader',
  10. options: Object.assign(
  11. {},
  12. cssOptions,
  13. {
  14. sourceMap: !isEnvDevelopment,
  15. },
  16. ),
  17. },
  18. ].filter(Boolean)
  19. if (preProcessor) {
  20. loaders.push({
  21. loader: preProcessor,
  22. options: { sourceMap: !isEnvDevelopment },
  23. })
  24. }
  25. return loaders
  26. }
  27. return [
  28. {
  29. test: /\.css$/,
  30. use: getStyleLoaders({ importLoaders: 1 }),
  31. },
  32. {
  33. test: /\.scss$/,
  34. use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
  35. },
  36. {
  37. test: /\.(png|jpe?g|gif|svg)$/,
  38. loader: 'file-loader',
  39. options: {
  40. name: 'assets/images/[name].[ext]',
  41. },
  42. },
  43. {
  44. test: /\.(ttf|otf|eot|woff2?)$/,
  45. loader: 'file-loader',
  46. options: {
  47. name: 'assets/fonts/[name].[ext]',
  48. },
  49. },
  50. {
  51. test: /\.(m?js|vue)$/,
  52. enforce: 'pre',
  53. include: srcPath,
  54. loader: 'eslint-loader',
  55. options: {
  56. formatter: require('eslint-friendly-formatter'),
  57. },
  58. },
  59. {
  60. test: /\.m?js$/,
  61. include: srcPath,
  62. loader: 'babel-loader',
  63. },
  64. {
  65. test: /\.vue$/,
  66. loader: 'vue-loader',
  67. },
  68. ]
  69. }