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. 9.7 Django
			
    2018-9-7 14:37:35 这次是 图书  出版社  作者 的连表 2018-9-7 16:56:36
    
			
    2. 
						
  2. 安装coreseek与sphinx遇见的问题
			
    1.问题 using config file 'etc/csft.conf'...indexing index 'xml'...WARNING: source 'xml': xmlpipe2 supp ...
    
			
    3. 
						
  3. Asp.net MVC]Asp.net MVC5系列——Routing特性
			
    目录 概述 路由特性 使用路由 可选参数和参数的默认值 路由前缀 默认路由 路由约束 自定义路由约束 路由名 区域(Area) 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列— ...
    
			
    4. 
						
  4. c++中用vector创建多维数组的初始化方法
			
    最近调试一个程序,在使用vector声明一个二维数组时出现错误.错误的方法如下所示: std::vector<std::vector<double> > sphereGrid; ...
    
			
    5. 
						
  5. 完整的Jquery-easyUI显示分页数据例子
			
    虽然说是入门的例子,但本人尽量做的详细点,以后会继续更新,部分功能 此外,为了后继easyui的学习,做了一个简单的框架:后台采用hibernate2.5+struts2开发:数据库用mysql.红色 ...
    
			
    6. 
						
  6. MySQL在linux上(cmake)的source code安装方法
			
    1.安装前准备: 1)必备的包和工具  gcc/g++ :MySQL 5.6开始,需要使用g++进行编译.  cmake  :MySQL 5.5开始,使用cmake进行工程管理,cmake需要2.8以 ...
    
			
    7. 
						
  7. python 线程，GIL 和 ctypes(转)
			
    原文:http://zhuoqiang.me/python-thread-gil-and-ctypes.html GIL 与 Python 线程的纠葛 GIL 是什么东西?它对我们的 python 程 ...
    
			
    8. 
						
  8. GDB常用命令使用说明（一）
			
    本文由霸气的菠萝原创,转载请注明出处:http://www.cnblogs.com/xsln/p/gdb_instructions1.html 全部关于gdb的文章索引请点这里 GDB(GNU Deb ...
    
			
    9. 
						
  9. linux中vim常用命令
			
    vim工作模式 vi 文件名 进入命令模式 i a o 进入插入模式 ESC键 回到命令模式 : 进入编辑模式 添加行号 :set number/nu :wq 保存退出 插入命令 a 在光标所在字符后 ...
    
			
    10. 
						
  10. mysql 数据库的操作
			
    1.数据库的查看 1)查看mysql中所有的数据库    "show databases;" mysql> show databases; +---------------- ...
    
			
    11.