utils.js文件主要是用来处理各种css loader的，比如css-loader，less-loader等。

//引入path模块

const path = require('path')

//引入之前的config模块

const config = require('../config')

//引入“extract-text-webpack-plugin”，它的作用是打包后将生成css文件通过link的方式引入到html中，如果不使用这个插件，那么css就打包到<head>的style中

const ExtractTextPlugin = require('extract-text-webpack-plugin')

//引入package.json

const pkg = require('../package.json')
exports.assetsPath = function (_path) {

//结合config文件的代码可以知道，当环境为生产环境时，assetSubDirectory为“static”,开发环境也是“static”

  const assetsSubDirectory = process.env.NODE_ENV === 'production'

    ? config.build.assetsSubDirectory

    : config.dev.assetsSubDirectory  

// path.posix.join()是path.join的一种兼容性写法，它的作用是路径的拼接，比如path.posix.join("/c/aa',"bb"); // "c/aa/bb"

  return path.posix.join(assetsSubDirectory, _path)

}
//用来生成Loader的函数 ，本身可以用在vue-loader的配置上(vue-loader.config.js文件，以后我会提这个文件)，同时也是为styleLoader函数使用（后面说）

exports.cssLoaders = function (options) {

  //如果没有传参就默认空对象

  options = options || {}

  //配置css-loader，css-loader可以让处理css中的@import或者url()

  const cssLoader = {

    loader: 'css-loader',

    options: {

      sourceMap: options.sourceMap

    }

  }

  //配置postcss-loader，主要功能是补全css中的兼容性前缀，比如“-webkit-”等

  var postcssLoader = {

    loader: 'postcss-loader',

    options: {

      sourceMap: options.sourceMap

    }

  }

  //生成loader的私有方法

  function generateLoaders (loader, loaderOptions) {

    //参数的usePostCss属性是否为true，是就使用两个loader，否则只使用css-loader

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {

      //给generateLoaders传loader参数的话，比如“less或者sass”，就将这个loader的配置传到loaders数组中

      loaders.push({

        loader: loader + '-loader',

        //Object.assign()是es6的语法，用来合并对象

        options: Object.assign({}, loaderOptions, {

          sourceMap: options.sourceMap

        })

      })

    }

    //如果options参数的extract属性为true，就使用extract text plugin将css抽成单独的文件，否则就将css写进style里

    if (options.extract) {

      return ExtractTextPlugin.extract({

        use: loaders,

        //vue-style-loader可以理解为vue版的style-loader，它可以将css放进style中

        fallback: 'vue-style-loader'

      })

    } else {

      return ['vue-style-loader'].concat(loaders)

    }

  }

  return {

    //返回各种loader

    css: generateLoaders(),

    postcss: generateLoaders(),

    less: generateLoaders('less'),

    sass: generateLoaders('sass', { indentedSyntax: true }),

    scss: generateLoaders('sass'),

    stylus: generateLoaders('stylus'),

    styl: generateLoaders('stylus')

  }

}




//生成开发环境下loader的配置，使用在（webpack.dev.conf.js中）

exports.styleLoaders = function (options) {

  const output = []

  //调用cssLoaders方法，返回loaders的对象

  const loaders = exports.cssLoaders(options)

  //遍历每一个loader，并配置成对应的格式，传给output数组

  for (const extension in loaders) {

    const loader = loaders[extension]

    output.push({

      test: new RegExp('\\.' + extension + '$'),

      use: loader

    })

  }

  return output

}






 


												


											
手撕vue-cli配置——utils.js篇的更多相关文章
	

    
								
  1. vue全局配置----小白基础篇
		
    今天学习vue全局配置.希望帮助我们去了解vue的全局配置,快速开发. Vue.config是vue的全局配置对象.包含Vue的所有全局属性: silent:boolean(默认值:false)--- ...
    
		
    2. 
						
  2. vue项目配置Mock.js
		
    扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...
    
		
    3. 
						
  3. vue中配置axios.js文件，发送请求
		
    为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
    
		
    4. 
						
  4. 【陪你系列】5 千字长文+ 30 张图解 | 陪你手撕 STL 空间配置器源码
		
    大家好,我是小贺. 点赞再看,养成习惯 文章每周持续更新,可以微信搜索「herongwei」第一时间阅读和催更,本文 GitHub https://github.com/rongweihe/MoreT ...
    
		
    5. 
						
  5. vue cli 配置信息说明
		
    摘自csdn http://blog.csdn.net/hongchh/article/details/55113751
    
		
    6. 
						
  6. Vue Cli安装以及使用
		
      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
    
		
    7. 
						
  7. vue cli 3
		
    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
    
		
    8. 
						
  8. 【1】vue/cli 3.0 脚手架 及cube-ui 安装
		
    安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ ...
    
		
    9. 
						
  9. Vue技术点整理-Vue CLI安装详解
		
     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. flask request模块
			
    原文链接: https://blog.csdn.net/u012163234/article/details/53116652    前言 在进行Flask开发中,前端需要发送不同的请求及各种带参数的 ...
    
			
    2. 
						
  2. CodeFirst Update-Database 出现对象'DF__**__**__**' 依赖于 列'**'。
			
    今天在使用Mirgration更新数据表时,出现这样一个错误 经排查,是由于CodeFirst在创建数据库时会为不可为null的字段创建默认值约束 只要在数据库中删除这个约束就可以解决
    
			
    3. 
						
  3. Oracle Function： NVL
			
    Description The Oracle/PLSQL NVL function lets you substitute a value when a null value is encounter ...
    
			
    4. 
						
  4. Python 字典 dict() 函数
			
    描述 Python 字典 dict() 函数用于创建一个新的字典,用法与 Pyhon 字典 update() 方法相似. 语法 dict() 函数函数语法: dict(key/value) 参数说明: ...
    
			
    5. 
						
  5. Android(一) 动态菜单
			
    1.android的一个activity可以再选中某项之后按menu键弹出特定的菜单,也就是动态菜单.动态菜单的实现是靠menu类中的addIntentOptions函数实现的,具体的声明如下: in ...
    
			
    6. 
						
  6. 缓存淘汰算法（LFU、LRU、ARC、FIFO、MRU）分析
			
    缓存算法是指令序列,用于决定缓存系统中哪些数据应该被删去. 常见类型包括LFU.LRU.ARC.FIFO.MRU. 一.最不经常使用算法(Least Frequently Used-LFU): 它是基 ...
    
			
    7. 
						
  7. BUG笔记：Firefox select选项右侧边框没了
			
    Firefox 的default select在某些情况下右侧边框会消失.截图如下: 这个目前为止没有看到有任何解决方案,HACK也没有...囧... 有高人知道吗?
    
			
    8. 
						
  8. sql优化 表连接join方式
			
        sql优化核心 是数据库中 解析器+优化器的工作,我觉得主要有以下几个大方面:1>扫表的方法(索引非索引.主键非主键.书签查.索引下推)2>关联表的方法(三种),关键是内存如何利用 ...
    
			
    9. 
						
  9. pem转cer
			
    openssl x509 -inform pem -in fullchain.pem -outform der -out fullchain.cer
    
			
    10. 
						
  10. Build-in Function:abs(),all(),any(),assii(),bin(),issubclass(),bytearray(),isinstance()
			
    print('abs():输出绝对值,是absolute的缩写--------------') print(abs(-1)) print('all()与any()------------------- ...
    
			
    11.