vue-cli脚手架build目录下utils.js工具配置文件详解


Posted in Javascript onSeptember 14, 2018

此文章用来解释vue-cli脚手架build目录中的utils.js配置文件

1.此配置文件是vue开发环境的wepack相关配置文件,主要用来处理css-loader和vue-style-loader

2.关于注释 •当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看

3.上代码

// 引入nodejs路径模块
var path = require('path')
// 引入config目录下的index.js配置文件
var config = require('../config')
// 引入extract-text-webpack-plugin插件,用来将css提取到单独的css文件中
// 详情请看(1)
var ExtractTextPlugin = require('extract-text-webpack-plugin')
// exports其实就是一个对象,用来导出方法的最终还是使用module.exports,此处导出assetsPath
exports.assetsPath = function (_path) {
  // 如果是生产环境assetsSubDirectory就是'static',否则还是'static',哈哈哈
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  // path.join和path.posix.join的区别就是,前者返回的是完整的路径,后者返回的是完整路径的相对根路径
  // 也就是说path.join的路径是C:a/a/b/xiangmu/b,那么path.posix.join就是b
  return path.posix.join(assetsSubDirectory, _path)
  // 所以这个方法的作用就是返回一个干净的相对根路径
}

// 下面是导出cssLoaders的相关配置
exports.cssLoaders = function (options) {
  // options如果没值就是空对象
  options = options || {}
  // cssLoader的基本配置
  var cssLoader = {
    loader: 'css-loader',
    options: {
      // options是用来传递参数给loader的
      // minimize表示压缩,如果是生产环境就压缩css代码
      minimize: process.env.NODE_ENV === 'production',
      // 是否开启cssmap,默认是false
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    // 将上面的基础cssLoader配置放在一个数组里面
    var loaders = [cssLoader]
    // 如果该函数传递了单独的loader就加到这个loaders数组里面,这个loader可能是less,sass之类的
    if (loader) {
      loaders.push({
        // 加载对应的loader
        loader: loader + '-loader',
        // Object.assign是es6的方法,主要用来合并对象的,浅拷贝
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    // 注意这个extract是自定义的属性,可以定义在options里面,主要作用就是当配置为true就把文件单独提取,false表示不单独提取,这个可以在使用的时候单独配置,瞬间觉得vue作者好牛逼
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
    // 上面这段代码就是用来返回最终读取和导入loader,来处理对应类型的文件
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(), // css对应 vue-style-loader 和 css-loader
    postcss: generateLoaders(), // postcss对应 vue-style-loader 和 css-loader
    less: generateLoaders('less'), // less对应 vue-style-loader 和 less-loader
    sass: generateLoaders('sass', { indentedSyntax: true }), // sass对应 vue-style-loader 和 sass-loader
    scss: generateLoaders('sass'), // scss对应 vue-style-loader 和 sass-loader
    stylus: generateLoaders('stylus'), // stylus对应 vue-style-loader 和 stylus-loader
    styl: generateLoaders('stylus') // styl对应 vue-style-loader 和 styl-loader 
  }
}

// Generate loaders for standalone style files (outside of .vue)
// 下面这个主要处理import这种方式导入的文件类型的打包,上面的exports.cssLoaders是为这一步服务的
exports.styleLoaders = function (options) {
  var output = []
  // 下面就是生成的各种css文件的loader对象
  var loaders = exports.cssLoaders(options)
  for (var extension in loaders) {
    // 把每一种文件的laoder都提取出来
    var loader = loaders[extension]
    output.push({
      // 把最终的结果都push到output数组中,大事搞定
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
  return output
}

注释

(1)extract-text-webpack-plugin插件是用来将文本从bundle中提取到一个单独的文件中

基本使用方法如下

const ExtractTextPlugin = require("extract-text-webpack-plugin");
  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/, //主要用来处理css文件
          use: ExtractTextPlugin.extract({
            fallback: "style-loader", // fallback表示如果css文件没有成功导入就使用style-loader导入
            use: "css-loader" // 表示使用css-loader从js读取css文件
          })
        }
      ],
      plugins: [
        new ExtractTextPlugin("styles.css") //表示生成styles.css文件
      ]
    }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
Javascript window对象详解
Nov 12 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 #Javascript
在vue项目中使用md5加密的方法
Sep 14 #Javascript
在vue项目中引用Iview的方法
Sep 14 #Javascript
详解webpack-dev-server使用方法
Sep 14 #Javascript
JS 实现微信扫一扫功能
Sep 14 #Javascript
详解webpack2异步加载套路
Sep 14 #Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 #Javascript
You might like
PHP与已存在的Java应用程序集成
2006/10/09 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
JavaScript事件列表解说
2006/12/22 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
举例详解Python中的split()函数的使用方法
2015/04/07 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Python使用python-docx读写word文档
2019/08/26 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
自荐信如何“自荐”
2013/10/24 职场文书
大学生入党思想汇报
2014/01/14 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
节能减耗标语
2014/06/21 职场文书
作风建设整改方案
2014/10/27 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
社会实践单位意见
2015/06/05 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
Nginx的基本概念和原理
2022/03/21 Servers
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS