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. vue之介绍
			
    vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...
    
			
    2. 
						
  2. 天梯赛 大区赛 L3-014.周游世界 （Dijkstra）
			
    L3-014. 周游世界 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 周游世界是件浪漫事,但规划旅行路线就不一定了-- 全世 ...
    
			
    3. 
						
  3. canvas API笔记
			
    HTML5添加的最受欢迎的功能就是<canvas>元素,这个元素负责在页面的指定区域通过js动态地在这个区域绘制图形. <canvas> 由几组API构成. 准备: <c ...
    
			
    4. 
						
  4. Pandas新建一个DataFrame
			
    我们在使用Pandas时候,前提需要一个新的DataFrame,需要首先初始化一个: 那么可以根据字典形式初始化: # 新建一个dataFrame df = pd.DataFrame({']) 必须包 ...
    
			
    5. 
						
  5. java重载和重载的区别
			
    重载 public class A{     public void test(){}     public void test(int num){}     public void test(Str ...
    
			
    6. 
						
  6. pro 图层 叹号
			
    同事遇到问题,后来他自己探索解决了~~大致记录如下 pro1.4中打开mxd,部分图层前显示叹号.根据arcmap的经验,点击叹号去修复,结果显示 不支持类型数据. 后解决办法:新建pro 的proj ...
    
			
    7. 
						
  7. elasticsearch的重启
			
    没有重启的操作,只有关闭了再启动的操作. ps -ef | grep elastic e表示全部的进程,f表示展示进程间的相关关系,如父子进程. 然后找到你启动es的那个账号,不是root,一般是新建 ...
    
			
    8. 
						
  8. Is It A Tree?----poj1308
			
    http://poj.org/problem?id=1308 #include<stdio.h> #include<string.h> #include<iostream ...
    
			
    9. 
						
  9. 洛谷P3557 GRA-Tower Defense Game [POI2013] 构造
			
    正解:构造 解题报告: 传送门 话说这题我理解题意理解了好久TT一直没懂那个,k的意义是什么,,,后来才明白,可能k就是没有意义的趴 (upd:好像明白辣,k是用来保证这么做是对的QwQ 然后就直接港 ...
    
			
    10. 
						
  10. 浅析I/O处理过程与存储性能的关系
			
    浅析I/O处理过程与存储性能的关系 https://community.emc.com/docs/DOC-28653 性能”这个词可以说伴随着整个IT行业的发展,每次新的技术出现,从硬件到软件大多数情 ...
    
			
    11.