vue-cli脚手架build目录下utils.js工具配置文件详解_vue文件里面的utils - CSDN文库

58 浏览量更新于2023-05-04 评论收藏 50KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue-cli脚手架脚手架build目录下目录下utils.js工具配置文件详解工具配置文件详解

此文章用来解释vue-cli脚手架build目录中的utils.js配置文件

1.此配置文件是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader

2.关于注释 •当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看

3.上代码

// 引入nodejs路径模块

var path = require('path')

// 引入config目录下的index.js配置文件

var config = require('../config')

// 引入extract-text-webpack-plugin插件，用来将css提取到单独的css文件中

// 详情请看(1)

var ExtractTextPlugin = require('extract-text-webpack-plugin')

// exports其实就是一个对象，用来导出方法的最终还是使用module.exports，此处导出assetsPath

exports.assetsPath = function (_path) {

// 如果是生产环境assetsSubDirectory就是'static'，否则还是'static'，哈哈哈

var assetsSubDirectory = process.env.NODE_ENV === 'production'

? config.build.assetsSubDirectory

: config.dev.assetsSubDirectory

// path.join和path.posix.join的区别就是，前者返回的是完整的路径，后者返回的是完整路径的相对根路径

// 也就是说path.join的路径是C:a/a/b/xiangmu/b，那么path.posix.join就是b

return path.posix.join(assetsSubDirectory, _path)

// 所以这个方法的作用就是返回一个干净的相对根路径

}

// 下面是导出cssLoaders的相关配置

exports.cssLoaders = function (options) {

// options如果没值就是空对象

options = options || {}

// cssLoader的基本配置

var cssLoader = {

loader: 'css-loader',

options: {

// options是用来传递参数给loader的

// minimize表示压缩，如果是生产环境就压缩css代码

minimize: process.env.NODE_ENV === 'production',

// 是否开启cssmap，默认是false

sourceMap: options.sourceMap

}

}

// generate loader string to be used with extract text plugin

function generateLoaders (loader, loaderOptions) {

// 将上面的基础cssLoader配置放在一个数组里面

var loaders = [cssLoader] // 如果该函数传递了单独的loader就加到这个loaders数组里面，这个loader可能是less,sass之类的

if (loader) {

loaders.push({

// 加载对应的loader

loader: loader + '-loader',

// Object.assign是es6的方法，主要用来合并对象的，浅拷贝

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

})

}

// Extract CSS when that option is specified

// (which is the case during production build)

// 注意这个extract是自定义的属性，可以定义在options里面，主要作用就是当配置为true就把文件单独提取，false表示不单独

提取，这个可以在使用的时候单独配置，瞬间觉得vue作者好牛逼

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader'

})

} else {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38629873

粉丝: 2
资源: 967

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈