'use strict'
// node中的path模块
const path = require('path')
//引入config/index.js文件
const config = require('../config')
//从bundle中提取文本(CSS)到单独的文件
const ExtractTextPlugin = require('extract-text-webpack-plugin')
//引入package.json文件
const packageConfig = require('../package.json')
//返回一个相对根路径
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
/*
* path.posix以POSIX兼容的方式执行path方法
* path.join 将给定的path片段连接到一起,然后规范化生成路径
* */
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
//解析css文件
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
//进一步处理CSS文件,比如添加浏览器前缀,压缩CSS等
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
//生成loaders
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
//将所有入口包中引入的css文件,移动到独立分离的CSS文件
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文件后,使用import加载,并返回css代码
css: generateLoaders(),
//使用postcss加载和编译css/sss文件
postcss: generateLoaders(),
//加载和转译less文件
less: generateLoaders('less'),
//加载和转译sass/scss文件
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
//加载和转译stylus文件
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
//生成对应了module rules
exports.styleLoaders = function (options) {
const output = []
//返回样式loader对象
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
//node-notifier node.js的消息发送模块
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}
vue-cli utils.js文件学习
最新推荐文章于 2022-02-10 20:52:37 发布
关键词由CSDN通过智能技术生成