utils.js 3.1 KB

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