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. CentOS环境下jdk安装部署
			
    1.准备jdk安装文件: 这里我使用的是 jdk-7u79-linux-x64.tar.gz 2.在 /usr/local 目录下创建 sotfware目录,并上传JDK文件: 解压文件并修改文件夹为 ...
    
			
    2. 
						
  2. mysql导入存储过程
			
    查询数据库存储过程 select `name` from mysql.proc where db = 'databaseName' and `type` = 'PROCEDURE'; mariadb操 ...
    
			
    3. 
						
  3. 源码解读  zsetAdd
			
    https://github.com/antirez/redis/blob/6a6471aad5e4f8d6cbab677b918b14cdee416296/src/t_zset.c /* Updat ...
    
			
    4. 
						
  4. Linux执行Cron Job失败，在Shell sh下执行却能成功 - 环境变量？
			
    博客分类: Linux linuxcrontabpermissionetc/profile环境变量  一.我们常常碰到在shell下执行某个命令能够成功,比如执行一个java程序: java -jar ...
    
			
    5. 
						
  5. http如何301到https呢?
			
    HTTPS协议的站点信息更加安全,同时可降低网站被劫持的风险,Firefox和chrome浏览器对访问一些非https站点会提示风险,BD等搜索引擎也明确表态了对https站点的友好.那么我们如何部署 ...
    
			
    6. 
						
  6. 梯度下降算法（Gradient Descent)
			
    近期在搞论文,须要用梯度下降算法求解,所以又一次整理分享在这里. 主要包含梯度介绍.公式求导.学习速率选择.代码实现. 梯度下降的性质: 1.求得的解和选取的初始点有关 2.能够保证找到局部最优解,由 ...
    
			
    7. 
						
  7. vue-watch
			
    <template> <div> <!-- 监听值的改变: --> <button class="th" @click="add ...
    
			
    8. 
						
  8. 空类指针为什么可以调用类的成员函数  以及 A(){}和A();
			
    1. 代码及问题 #include <iostream> using namespace std; class A { public: A() {} //A *p = new A()时:此 ...
    
			
    9. 
						
  9. vue学习之node.js
			
    Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.本文详细介绍了No ...
    
			
    10. 
						
  10. HDU1010:Tempter of the Bone(dfs+剪枝)
			
    http://acm.hdu.edu.cn/showproblem.php?pid=1010   //题目链接 http://ycool.com/post/ymsvd2s//一个很好理解剪枝思想的博客 ...
    
			
    11.