vue-cli脚手架npm相关文件解读(4)utils.js
系列文章传送门:
下面是build/utils.js中相关代码和配置的说明
项目地址:https://github.com/SmileSmith(感觉不错的话帮忙打个星哈 ~)
/* * npm run dev和 npm run build中可能用到的公共函数 * 目前主要包括 * 1、获取兼容的输出路径的函数 * 2、cssLoader工厂函数 */ var path = require('path') var config = require('../config') var ExtractTextPlugin = require('extract-text-webpack-plugin') // 导出assetsPath函数,调试和构建时导出文件的路径都采用这种方式的路径 exports.assetsPath = function (_path) { var assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory // path.join和path.posix.join的区别就是,后者以 posix 兼容的方式交互 // 这里为什么用posix这样做跨平台的 posix 兼容,而读取内容的地方都没有用?? 请大神指导 return path.posix.join(assetsSubDirectory, _path) } // 导出最终读取和导入的loader,来处理对应类型的文件 exports.cssLoaders = function (options) { options = options || {} // 基础的css-loader配置 var cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { // webpack中loader的执行是 右-->左,因此最后的css-loader先放在数组的第一位 var loaders = [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { // Object.assign是es6的方法,主要用来合并对象的,浅拷贝 sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) // 是否单独css是统一配置的,避免不同类型的css混乱 // 所以这里不读取loaderOptions,而是取统一的option的extract配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } // 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为这一步服务 // 注意.VUE文件不用这个,用vue-loader.config中的配置 exports.styleLoaders = function (options) { var output = [] // 生成的各种css文件的loader对象 var loaders = exports.cssLoaders(options) for (var extension in loaders) { var loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output }
参考:http://www.cnblogs.com/ye-hcj/archive/2017/06.html
vue-cli脚手架npm相关文件解读(4)utils.js的更多相关文章
- vue-cli脚手架npm相关文件解读(1)webpack.base.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(9)config/index.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(8)check-versions.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(7)dev-server.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(6)build.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(5)vue-loader.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(3)webpack.dev.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(2)webpack.prod.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
随机推荐
- jvm003 类加载的过程
类加载的过程 一.加载 在加载阶段虚拟机需要完成以下三件事: 通过一个类的全限定名称来获取此类的二进制字节流 将这个字节流所代表的静态存储结构转化为方法区的运行时数据结构 在内存中生成一个代表这个类的 ...
- language-detection 语言检测工具 java版的应用demo
本文基本借鉴大佬文章:http://www.cnblogs.com/makemelaugh/archive/2012/09/26/2704802.html 在此基础上添加一些自己的补充,方便查阅. 提 ...
- JDBC&&c3p0、事务、批处理、多线程 于一体的经典秘方QueryRunner
目录: 基础篇_功能各自回顾 JDBC基础代码回顾(使用JdbcUtils工具简化) c3p0数据库连接池的使用(使用JdbcUtils工具简化) 大数据的插入(使用c3p0+JdbcUtils工具简 ...
- 【期望DP】
[总览] [期望dp] 求解达到某一目标的期望花费:因为最终的花费无从知晓(不可能从$\infty$推起),所以期望dp需要倒序求解. 设$f[i][j]$表示在$(i, j)$这个状态实现目标的期望 ...
- ES6对象扩展
前面的话 随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要.ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象 ...
- Spring源码情操陶冶-AbstractApplicationContext#prepareBeanFactory
阅读源码有助于陶冶情操,本文承接Spring源码情操陶冶-AbstractApplicationContext#obtainFreshBeanFactory 瞧瞧官方注释 /** * Configur ...
- JPA Advanced Mappings(映射)
JPA Advanced Mappings(映射) JPA是一个使用java规范发布的库.因此,它支持所有面向对象的实体持久性概念. 原文链接:http://blogxinxiucan.sh1.new ...
- ubuntu的/etc/modules内核模块文件
/etc/modules: 内核模块文件,里面列出的模块会在系统启动时自动加载. /etc/modprobe.d: 存放禁止加载或者加载内核模块脚本的目录. 以下是我增加netfilter模块是的流程 ...
- mysql 5.7 root密码重置(centos 7)
mysql5.7版本之后,与mariadb不同,在安装之后,在启动之时,会进行自动随机密码的设定,所以在systemctl start mysqld之后,会出现mysql -uroot -p无法登陆的 ...
- 红帽 Red Hat Linux相关产品iso镜像下载【百度云】(转载)
不为什么,就为了方便搜索,特把红帽EL 5.EL6.EL7 的各版本整理一下,共享出来.正式发布 6.9 :RedHat Enterprise Server 6.9 for x86_64:rhel-s ...