utils.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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 =
  8. process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory
  9. return path.posix.join(assetsSubDirectory, _path)
  10. }
  11. exports.cssLoaders = function(options) {
  12. options = options || {}
  13. const cssLoader = {
  14. loader: 'css-loader',
  15. options: {
  16. sourceMap: options.sourceMap
  17. }
  18. }
  19. const postcssLoader = {
  20. loader: 'postcss-loader',
  21. options: {
  22. sourceMap: options.sourceMap
  23. }
  24. }
  25. // generate loader string to be used with extract text plugin
  26. function generateLoaders(loader, loaderOptions) {
  27. const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
  28. if (loader) {
  29. loaders.push({
  30. loader: loader + '-loader',
  31. options: Object.assign({}, loaderOptions, {
  32. sourceMap: options.sourceMap
  33. })
  34. })
  35. }
  36. // Extract CSS when that option is specified
  37. // (which is the case during production build)
  38. if (options.extract) {
  39. return ExtractTextPlugin.extract({
  40. use: loaders,
  41. fallback: 'vue-style-loader'
  42. })
  43. } else {
  44. return ['vue-style-loader'].concat(loaders)
  45. }
  46. }
  47. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  48. return {
  49. css: generateLoaders(),
  50. postcss: generateLoaders(),
  51. less: generateLoaders('less'),
  52. sass: generateLoaders('sass', { indentedSyntax: true }),
  53. scss: generateLoaders('sass'),
  54. stylus: generateLoaders('stylus'),
  55. styl: generateLoaders('stylus')
  56. }
  57. }
  58. // Generate loaders for standalone style files (outside of .vue)
  59. exports.styleLoaders = function(options) {
  60. const output = []
  61. const loaders = exports.cssLoaders(options)
  62. for (const extension in loaders) {
  63. const loader = loaders[extension]
  64. output.push({
  65. test: new RegExp('\\.' + extension + '$'),
  66. use: loader
  67. })
  68. }
  69. return output
  70. }
  71. exports.createNotifierCallback = () => {
  72. const notifier = require('node-notifier')
  73. return (severity, errors) => {
  74. if (severity !== 'error') return
  75. const error = errors[0]
  76. const filename = error.file && error.file.split('!').pop()
  77. notifier.notify({
  78. title: packageConfig.name,
  79. message: severity + ': ' + error.name,
  80. subtitle: filename || '',
  81. icon: path.join(__dirname, 'logo.png')
  82. })
  83. }
  84. }