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.assetsSubDirectory = function (_path) {
// 联合config文件的代码能够晓得 当环境为生产环境时 assetsSubDirectory为static开发环境也是static
const assetsSubDirectory =
progress.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
// path.posix.join()是path.join的一种兼容写法 它的作用是门路的拼接 比方path.posix.join('/aa/s','bb')
return path.posix.join(assetsSubDirectory,_path)
}
// 用来生成Loader的函数，自身能够用在vue-loader的配置上，同时也是为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-laoder",
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.config.js中)
exports.styleLoaders = function(options){
const output = []
// 调用cssLoader办法 返回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
}
发表回复