utils.js 详解（转自 https://blog.csdn.net/xiaoxiaoluckylucky/article/details/86172213）

//此文件用来配置assetsPath css-loader和vue-style-loader createNotifierCallback
'use strict'
//导入path
const path = require('path')
//导入config文件下的index.js
const config = require('../config')
//导入extract-text-webpack-plugin 用来抽离css 防止css打包压缩到js中
const ExtractTextPlugin = require('../package.json')
 
//导出assetsPath 
exports.assetsPath = function(_path){
   const assetsSubDirectory = process.env.NODE_ENV === 'production'?config.build.assetsSubDirectory:config.dev.assetsSubDirectory
   //path.posix是处理跨操作系统 path.join是用\拼接路径片
   return path.posix.join(assetsSubDirectory,_path)
}
 
//导出lcssLoaders 该cssLoaders是为了下面的styleLoaders服务
exports.cssLoaders = function(options){
   options = options||{}
   //cssLoader基本配置
   const cssLoader = {
       //css-loader处理css
      loader:'css-loader',
      options:{
          //是否开启sourceMap 用来调试
          sourceMap:options.sourceMap
      }
   }
    //postcssLoader基本配置 用来添加浏览器前缀
   const postcssLoader = {
       //postcss-loader处理
       loader:'postcss-loader',
       options:{
           //是否开始sourceMap 用来调试
           sourceMap:options.sourceMap
       }
   }
 
   //封装函数 添加相应的css预处理器的插件
   function generateLoaders(loader,loaderOptions){
       //将上面的cssLoader放在一个数组中
      const loaders = options.usePostCSS ? [cssLoader,postcssLoader]:[cssLoader]
      //如果该函数传达了loader那就添加到loaders中，该loader可能是less/sass等
      if(loader){
          //添加到loaders中
          loaders.push({
              //loader配置
              loader:loader+'-loader',
              //参数配置 Object.assign是合并对象
              options:Object.assign({},loaderOptions,{
                  sourceMap:options.sourceMap
              })
          })
      }
      //根据是否抽离css 返回最终读取和导入loader 来处理对应类型的文件
      //是否抽离css
      if(options.extract){
          //提取抽离css
         return ExtractTextPlugin.extract({
            use:loaders,
            fallback:'vue-style-loader'
         })
      }else{
          //不提取抽离css
          return ['vue-style-loader'].concat(loaders)
      }
   }
//cssLoaders返回示例
//    {
//     css: ExtractTextPlugin.extract({
//               use: [{
//                 loader: 'css-loader',
//                 options: {
//                   sourceMap: true,
//                   extract: true
//                 }
//               }],
//               fallback: 'vue-style-loader'
//             }),
//    //剩下的略
//   }
   return{
       //css对应css-loader
       css:generateLoaders(),
       //postcss对应css-loader
       postcss:generateLoaders(),
       //less对应less-loader
       less:generateLoaders('less'),
       //sass对应sass-loader
       sass:generateLoaders('sass',{indentedSyntax:true}),
       //scss对应scss-loader
       scss:generateLoaders('sass'),
       //stylus对应stylus-loader
       stylus:generateLoaders('stylus'),
       //styl对应styl-loader
       styl:generateLoaders('stylus')
   }
}
 
//主要处理Import方式导入的文件类型的打包，上面的cssLoaders是为这步服务
exports.styleLoaders = function(options){
  const output = []
  const loaders = exports.cssLoaders(options)
  for(const extension in loaders){
    //该loader是各种css文件生成的loader对象
    const loader = loaders[extension]
    output.push({
        //用loader处理符合test正则的文件
        test:new RegExp('\\.'+extension+'$'),
        use:loader
    })
  }
  //styleLoaders返回示例
//   var output=[
//     {
//         test: new RegExp('\\.css$'),
//          use: ExtractTextPlugin.extract({
//                 use: [{
//                   loader: 'css-loader',
//                   options: {
//                     sourceMap: true,
//                     extract: true
//                   }
//                 }],
//                 fallback: 'vue-style-loader'
//               })
//     }
//     //剩下的略
//   ]
  return output
}
 
exports.createNotifierCallback = () => {
    //发送桌面消息
    const notifier = require('node-notifier')
    return (severity,errors) =>{
       if(severity !=='error') return
       const error = errors[0]
       const filename = error.file && error.file.split('!').pop()
       notifier.notify({
           title:packageConfig.name,
           message:severity + ': '+error.name,
           subtitle:filename||'',
           icon:path.join(__dirname,'logo.png')
       })
    }
}