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. Laravel 查询包括软删除的记录
			
    查询结果包括已被软删除的记录: Model::withTrashed()->get(); 只查询软删除记录: Model::onlyTrashed()->get(); PS:个人博客-La ...
    
			
    2. 
						
  2. Ubuntu 16.04: How to install OpenCV
			
    参考:https://www.pyimagesearch.com/2016/10/24/ubuntu-16-04-how-to-install-opencv/ 步骤# 1:安装opencv的依赖项 本 ...
    
			
    3. 
						
  3. SQL Fundamentals || Single-Row Functions || 数字函数number functions
			
    SQL Fundamentals || Oracle SQL语言 SQL Fundamentals: Using Single-Row Functions to Customize Output使用单 ...
    
			
    4. 
						
  4. Python开发【Tornado】：搭建文件下载服务、音频文件播放
			
    Tornado 如何做文件下载 要求:浏览器输入url地址,直接弹窗提示下载 Tornado服务端,搭建文件下载服务 #!/usr/bin/env python # -*- coding:utf-8  ...
    
			
    5. 
						
  5. socke+epoll
			
    读: #define V5CLI_READ_MSG_LEN 1024 char readMsg[V5CLI_READ_MSG_LEN]; ; ; )) > ){ n += nread; }//读 ...
    
			
    6. 
						
  6. MSMQ研究
			
    开发过程记录如下: 1.   本机配置MSMQ ------控制面板-------启动或者关闭Windows功能----默认安装MSMQ即可 注意:本地安装后再VS中才能引用System.Messag ...
    
			
    7. 
						
  7. Chrome Input框老是有输入记录的终极解决方案
			
    尤其是日期框,输入记录都挡住日期弹框了. 浏览器地址栏输入: chrome://settings/autofill,按钮关掉就可以了.
    
			
    8. 
						
  8. FireFox Plugin编程
			
    9 jiaofeng601, +479 9人支持,来自 Meteor.猪爪.hanyuxinting更多   本文通过多图组合,详细引导初学者开发NPAPI的浏览器插件. 如需测试开发完成的插件请参考 ...
    
			
    9. 
						
  9. docker 批量删除容器和镜像
			
    docker 批量删除容器和镜像 1,删除单个镜像或者容器 docker  rmi  镜像ID/镜像名字:TAG docker  rm  容器ID/容器名字 1.停止所有的container,这样才能 ...
    
			
    10. 
						
  10. C++Builder6.0 新建和打开项目软件死机
			
    大清早上班打开C++Builder6.0软件,打开项目却卡死,甚是奇怪,然后尝试新建项目也同样卡死.尝试打开一个CPP文件,可以打开,再尝试打开项目.bpr文件,便打开了.至于原因为什么,那就不得而知 ...
    
			
    11.