// 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
}