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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
JS的深浅复制详细
Oct 16 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Python操作Excel之xlsx文件
2017/03/24 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
数学专业推荐信范文
2013/11/21 职场文书
自主招生自荐信范文
2013/12/04 职场文书
药店促销活动总结
2014/07/10 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
化工见习报告范文
2014/10/31 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis