手撕vue-cli配置——utils.js篇
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篇的更多相关文章
- vue全局配置----小白基础篇
今天学习vue全局配置.希望帮助我们去了解vue的全局配置,快速开发. Vue.config是vue的全局配置对象.包含Vue的所有全局属性: silent:boolean(默认值:false)--- ...
- vue项目配置Mock.js
扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
- 【陪你系列】5 千字长文+ 30 张图解 | 陪你手撕 STL 空间配置器源码
大家好,我是小贺. 点赞再看,养成习惯 文章每周持续更新,可以微信搜索「herongwei」第一时间阅读和催更,本文 GitHub https://github.com/rongweihe/MoreT ...
- vue cli 配置信息说明
摘自csdn http://blog.csdn.net/hongchh/article/details/55113751
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- 【1】vue/cli 3.0 脚手架 及cube-ui 安装
安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ ...
- Vue技术点整理-Vue CLI安装详解
一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...
随机推荐
- [译] 深入理解 JavaScript 事件循环(二)— task and microtask
引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执 ...
- POJ-1322 Chocolate(概率DP)
Chocolate Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9279 Accepted: 2417 Special Jud ...
- Python的全局和局部变量
global1 = " def o(): #global global1; global1=2; print(global1) def p(): print(global1) if __na ...
- Oracle体系结构之数据库启动的不同状态
数据库启动的不同状态: nomount状态:spfile和plile mount状态:control file open状态:data file和redo file 启动数据库的过程:nomount状 ...
- Python:正则表达式概念
#正则表达式内容非常多,网上的学习资源也是目不暇接,我从中筛选学习并且整理出以下 的学习笔记 一.正则表达式匹配过程: 1.依次拿出表达式和文本中的字符比较 2.如果每一个字符都能匹配,则匹配成功:一 ...
- 得到scp命令的完整路径
奇怪的crontab 遇上shell scp不执行了-CSDN论坛 https://bbs.csdn.net/topics/390593780
- the command line tools
PhpStorm 10.0.2 http://stackoverflow.com/questions/22572861/error-cant-use-subversion-command-line-c ...
- svn冲突的解决
svn文件冲突的解决 冲突后,会产生三个多余的文件. ①文件名.扩展名.mine 这是你的文件,在你更新你的工作副本之前存在于你的工作副本中--也就是说,没有冲突标志.这个文件 除了你的最新修改外没有 ...
- django模板语言转义处理
模板变量的内容,如果含html的话,django的模板系统默认会对输出进行转义,比如把<p>转义成了<p> ,然后再显示出来的时候就如实地显示为<p>.要解决这个问 ...
- Jmeter(五)_函数
JMeter提供了很多函数,如果能够熟练使用,可以为脚本带来很多方便. JMeter函数是一种特殊值,可用于除测试计划外的任何组件. 函数调用的格式如下所示:${__functionName(var1 ...