1 //此檔案用來配置 assetsPath css-loader 和 vue-style-loader createNotifierCallback
  2 'use strict'
  3 const path = require('path')
  4 const config = require('../config')
  5 const MiniCssExtractPlugin = require('mini-css-extract-plugin') //將CSS提取為獨立的檔案的外掛，對每個包含css的js檔案都會建立一個CSS檔案
  6 const packageConfig = require('../package.json')
 
  7 
  8 // 匯出assetsPath
  9 exports.assetsPath = function (_path) {
 10   const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
 11     config.build.assetsSubDirectory :
 12     config.dev.assetsSubDirectory
 13 
 14   // path.posix是處理跨作業系統 path.join是用\拼接路徑片
 15   return path.posix.join(assetsSubDirectory, _path)
 
 16 }
 17 
 18 // 匯出lcssLoaders 該cssLoaders是為了下面的styleLoaders服務
 19 exports.cssLoaders = function (options) {
 20   options = options || {}
 21   // cssLoader基本配置
 22   const cssLoader = {
 23     // css-loader處理css
 24     loader: 'css-loader',
 25     options: {
 26       // 是否開啟sourceMap 用來除錯
 27       sourceMap: options.sourceMap
 
 28     }
 29   }
 30   // postcssLoader基本配置 用來新增瀏覽器字首
 31   const postcssLoader = {
 32     loader: 'postcss-loader',
 33     options: {
 34       sourceMap: options.sourceMap
 35     }
 36   }
 37 
 38   // generate loader string to be used with extract text plugin
 39   function generateLoaders(loader, loaderOptions) {
 40     // 將上面的cssLoader放在一個數組中
 41     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 42     // 如果該函式傳達了loader那就新增到loaders中，該loader可能是less/sass等
 43     if (loader) {
 44       loaders.push({
 45         // loader配置
 46         loader: loader + '-loader',
 47         // 引數配置 Object.assign是合併物件
 48         options: Object.assign({}, loaderOptions, {
 49           sourceMap: options.sourceMap
 50         })
 51       })
 52     }
 53 
 54     // 當指定該選項時提取CSS (生產構建期間的情況)
 55     if (options.extract) {
 56       //提取抽離css
 57       return [MiniCssExtractPlugin.loader].concat(loaders)
 58     } else {
 59       //不提取抽離css
 60       return ['vue-style-loader'].concat(loaders)
 61     }
 62   }
 63 
 64   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 65   return {
 66     css: generateLoaders(),
 67     postcss: generateLoaders(),
 68     less: generateLoaders('less'),
 69     sass: generateLoaders('sass', {
 70       indentedSyntax: true
 71     }),
 72     scss: generateLoaders('sass'),
 73     stylus: generateLoaders('stylus'),
 74     styl: generateLoaders('stylus')
 75   }
 76 }
 77 
 78 // 為獨立樣式檔案生成 loader (.vue之外)
 79 exports.styleLoaders = function (options) {
 80   const output = []
 81   const loaders = exports.cssLoaders(options)
 82 
 83   for (const extension in loaders) {
 84     // 該loader是各種css檔案生成的loader物件
 85     const loader = loaders[extension]
 86     output.push({
 87       // 用loader處理符合test正則的檔案
 88       test: new RegExp('\\.' + extension + '$'),
 89       use: loader
 90     })
 91   }
 92 
 93   return output
 94 }
 95 
 96 exports.createNotifierCallback = () => {
 97   // 傳送桌面訊息
 98   const notifier = require('node-notifier')
 99 
100   return (severity, errors) => {
101     if (severity !== 'error') return
102 
103     const error = errors[0]
104     const filename = error.file && error.file.split('!').pop()
105 
106     notifier.notify({
107       title: packageConfig.name,
108       message: severity + ': ' + error.name,
109       subtitle: filename || '',
110       icon: path.join(__dirname, 'logo.png')
111     })
112   }
113 }