utils.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. var path = require('path')
  2. var config = require('../config')
  3. var ExtractTextPlugin = require('extract-text-webpack-plugin')
  4. exports.assetsPath = function (_path) {
  5. var assetsSubDirectory = process.env.NODE_ENV === 'production'
  6. ? config.build.assetsSubDirectory
  7. : config.dev.assetsSubDirectory
  8. return path.posix.join(assetsSubDirectory, _path)
  9. }
  10. exports.cssLoaders = function (options) {
  11. options = options || {}
  12. var cssLoader = {
  13. loader: 'css-loader',
  14. options: {
  15. minimize: process.env.NODE_ENV === 'production',
  16. sourceMap: options.sourceMap
  17. }
  18. }
  19. var postcssLoader = {
  20. loader: 'postcss-loader',
  21. options: {
  22. sourceMap: true
  23. }
  24. }
  25. var px2rpxLoader = {
  26. loader: 'px2rpx-loader',
  27. options: {
  28. baseDpr: 1,
  29. rpxUnit: 0.5
  30. }
  31. }
  32. // generate loader string to be used with extract text plugin
  33. function generateLoaders (loader, loaderOptions) {
  34. var loaders = [cssLoader, px2rpxLoader, postcssLoader]
  35. if (loader) {
  36. loaders.push({
  37. loader: loader + '-loader',
  38. options: Object.assign({}, loaderOptions, {
  39. sourceMap: options.sourceMap
  40. })
  41. })
  42. }
  43. // Extract CSS when that option is specified
  44. // (which is the case during production build)
  45. if (options.extract) {
  46. return ExtractTextPlugin.extract({
  47. use: loaders,
  48. fallback: 'vue-style-loader'
  49. })
  50. } else {
  51. return ['vue-style-loader'].concat(loaders)
  52. }
  53. }
  54. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  55. return {
  56. css: generateLoaders(),
  57. wxss: generateLoaders(),
  58. postcss: generateLoaders(),
  59. less: generateLoaders('less'),
  60. sass: generateLoaders('sass', { indentedSyntax: true }),
  61. scss: generateLoaders('sass'),
  62. stylus: generateLoaders('stylus'),
  63. styl: generateLoaders('stylus')
  64. }
  65. }
  66. // Generate loaders for standalone style files (outside of .vue)
  67. exports.styleLoaders = function (options) {
  68. var output = []
  69. var loaders = exports.cssLoaders(options)
  70. for (var extension in loaders) {
  71. var loader = loaders[extension]
  72. output.push({
  73. test: new RegExp('\\.' + extension + '$'),
  74. use: loader
  75. })
  76. }
  77. return output
  78. }