utils.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. 'use strict'
  2. const path = require('path')
  3. const config = require('../config')
  4. const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5. const packageConfig = require('../package.json')
  6. exports.assetsPath = function (_path) {
  7. const assetsSubDirectory = process.env.NODE_ENV === 'production'
  8. ? config.build.assetsSubDirectory
  9. : config.dev.assetsSubDirectory
  10. return path.posix.join(assetsSubDirectory, _path)
  11. }
  12. exports.cssLoaders = function (options) {
  13. options = options || {}
  14. const cssLoader = {
  15. loader: 'css-loader',
  16. options: {
  17. sourceMap: options.sourceMap
  18. }
  19. }
  20. const px2remLoader = {
  21. loader: 'px2rem-loader',
  22. options: {
  23. remUnit: 54,
  24. }
  25. }
  26. const postcssLoader = {
  27. loader: 'postcss-loader',
  28. options: {
  29. sourceMap: options.sourceMap
  30. }
  31. }
  32. // generate loader string to be used with extract text plugin
  33. function generateLoaders (loader, loaderOptions) {
  34. const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
  35. // 添加less文件的批量导入功能
  36. if (loader) {
  37. loaders.push({
  38. loader: loader + '-loader',
  39. options: Object.assign({}, loaderOptions, {
  40. sourceMap: options.sourceMap,
  41. // resources: [
  42. // path.resolve(__dirname, '../src/assets/theme/style.less'), // 此路径是自己定义的全局路径
  43. // ]
  44. })
  45. })
  46. }
  47. // Extract CSS when that option is specified
  48. // (which is the case during production build)
  49. if (options.extract) {
  50. return ExtractTextPlugin.extract({
  51. use: loaders,
  52. fallback: 'vue-style-loader',
  53. publicPath: '../../',//解决ele小图标出不来问题
  54. })
  55. } else {
  56. return ['vue-style-loader'].concat(loaders)
  57. }
  58. }
  59. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  60. return {
  61. css: generateLoaders(),
  62. postcss: generateLoaders(),
  63. less: generateLoaders('less').concat({
  64. loader: 'sass-resources-loader',
  65. options: {
  66. resources: path.resolve(__dirname, '../src/assets/theme/style.less')
  67. }
  68. }),
  69. sass: generateLoaders('sass', { indentedSyntax: true }),
  70. scss: generateLoaders('sass'),
  71. stylus: generateLoaders('stylus'),
  72. styl: generateLoaders('stylus')
  73. }
  74. }
  75. // Generate loaders for standalone style files (outside of .vue)
  76. exports.styleLoaders = function (options) {
  77. const output = []
  78. const loaders = exports.cssLoaders(options)
  79. for (const extension in loaders) {
  80. const loader = loaders[extension]
  81. output.push({
  82. test: new RegExp('\\.' + extension + '$'),
  83. use: loader
  84. })
  85. }
  86. return output
  87. }
  88. exports.createNotifierCallback = () => {
  89. const notifier = require('node-notifier')
  90. return (severity, errors) => {
  91. if (severity !== 'error') return
  92. const error = errors[0]
  93. const filename = error.file && error.file.split('!').pop()
  94. notifier.notify({
  95. title: packageConfig.name,
  96. message: severity + ': ' + error.name,
  97. subtitle: filename || '',
  98. icon: path.join(__dirname, 'logo.png')
  99. })
  100. }
  101. }