utils.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. 'use strict'
  2. const path = require('path')
  3. const config = require('../config')
  4. const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5. exports.assetsPath = function (_path) {
  6. const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
  7. config.build.assetsSubDirectory :
  8. 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. minimize: process.env.NODE_ENV === 'production',
  17. sourceMap: options.sourceMap
  18. }
  19. }
  20. // generate loader string to be used with extract text plugin
  21. function generateLoaders(loader, loaderOptions) {
  22. const loaders = [cssLoader]
  23. if (loader) {
  24. loaders.push({
  25. loader: loader + '-loader',
  26. options: Object.assign({}, loaderOptions, {
  27. sourceMap: options.sourceMap
  28. })
  29. })
  30. }
  31. // Extract CSS when that option is specified
  32. // (which is the case during production build)
  33. if (options.extract) {
  34. return ExtractTextPlugin.extract({
  35. use: loaders,
  36. publicPath: '../../', // 注意配置这一部分,根据目录结构自由调整
  37. fallback: 'vue-style-loader'
  38. })
  39. } else {
  40. return ['vue-style-loader'].concat(loaders)
  41. }
  42. }
  43. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  44. return {
  45. css: generateLoaders(),
  46. postcss: generateLoaders(),
  47. less: generateLoaders('less'),
  48. sass: generateLoaders('sass', {
  49. indentedSyntax: true
  50. }),
  51. scss: generateLoaders('sass'),
  52. stylus: generateLoaders('stylus'),
  53. styl: generateLoaders('stylus')
  54. }
  55. }
  56. // Generate loaders for standalone style files (outside of .vue)
  57. exports.styleLoaders = function (options) {
  58. const output = []
  59. const loaders = exports.cssLoaders(options)
  60. for (const extension in loaders) {
  61. const loader = loaders[extension]
  62. output.push({
  63. test: new RegExp('\\.' + extension + '$'),
  64. use: loader
  65. })
  66. }
  67. return output
  68. }