//此文件用来配置assetsPath css-loader和vue-style-loader createNotifierCallback
'use strict'
//导入path
const path = require('path')
//导入config文件下的index.js
const config = require('../config')
//导入extract-text-webpack-plugin 用来抽离css 防止css打包压缩到js中
const ExtractTextPlugin = require('../package.json')
//导出assetsPath
exports.assetsPath = function(_path){
const assetsSubDirectory = process.env.NODE_ENV === 'production'?config.build.assetsSubDirectory:config.dev.assetsSubDirectory
//path.posix是处理跨操作系统 path.join是用\拼接路径片
return path.posix.join(assetsSubDirectory,_path)
}
//导出lcssLoaders 该cssLoaders是为了下面的styleLoaders服务
exports.cssLoaders = function(options){
options = options||{}
//cssLoader基本配置
const cssLoader = {
//css-loader处理css
loader:'css-loader',
options:{
//是否开启sourceMap 用来调试
sourceMap:options.sourceMap
}
}
//postcssLoader基本配置 用来添加浏览器前缀
const postcssLoader = {
//postcss-loader处理
loader:'postcss-loader',
options:{
//是否开始sourceMap 用来调试
sourceMap:options.sourceMap
}
}
//封装函数 添加相应的css预处理器的插件
function generateLoaders(loader,loaderOptions){
//将上面的cssLoader放在一个数组中
const loaders = options.usePostCSS ? [cssLoader,postcssLoader]:[cssLoader]
//如果该函数传达了loader那就添加到loaders中,该loader可能是less/sass等
if(loader){
//添加到loaders中
loaders.push({
//loader配置
loader:loader+'-loader',
//参数配置 Object.assign是合并对象
options:Object.assign({},loaderOptions,{
sourceMap:options.sourceMap
})
})
}
//根据是否抽离css 返回最终读取和导入loader 来处理对应类型的文件
//是否抽离css
if(options.extract){
//提取抽离css
return ExtractTextPlugin.extract({
use:loaders,
fallback:'vue-style-loader'
})
}else{
//不提取抽离css
return ['vue-style-loader'].concat(loaders)
}
}
//cssLoaders返回示例
// {
// css: ExtractTextPlugin.extract({
// use: [{
// loader: 'css-loader',
// options: {
// sourceMap: true,
// extract: true
// }
// }],
// fallback: 'vue-style-loader'
// }),
// //剩下的略
// }
return{
//css对应css-loader
css:generateLoaders(),
//postcss对应css-loader
postcss:generateLoaders(),
//less对应less-loader
less:generateLoaders('less'),
//sass对应sass-loader
sass:generateLoaders('sass',{indentedSyntax:true}),
//scss对应scss-loader
scss:generateLoaders('sass'),
//stylus对应stylus-loader
stylus:generateLoaders('stylus'),
//styl对应styl-loader
styl:generateLoaders('stylus')
}
}
//主要处理Import方式导入的文件类型的打包,上面的cssLoaders是为这步服务
exports.styleLoaders = function(options){
const output = []
const loaders = exports.cssLoaders(options)
for(const extension in loaders){
//该loader是各种css文件生成的loader对象
const loader = loaders[extension]
output.push({
//用loader处理符合test正则的文件
test:new RegExp('\\.'+extension+'$'),
use:loader
})
}
//styleLoaders返回示例
// var output=[
// {
// test: new RegExp('\\.css$'),
// use: ExtractTextPlugin.extract({
// use: [{
// loader: 'css-loader',
// options: {
// sourceMap: true,
// extract: true
// }
// }],
// fallback: 'vue-style-loader'
// })
// }
// //剩下的略
// ]
return output
}
exports.createNotifierCallback = () => {
//发送桌面消息
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')
})
}
}