vue-cli的utils.js文件详解

// 引入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.assetsPath = function (_path) { ?var assetsSubDirectory = process.env.NODE_ENV === ‘production‘ ???? config.build.assetsSubDirectory ???: config.dev.assetsSubDirectory ?return path.posix.join(assetsSubDirectory, _path)}exports.cssLoaders = function (options) { ?options = options || {} ?var cssLoader = { ???loader: ‘css-loader‘, ???options: { ?????minimize: process.env.NODE_ENV === ‘production‘, ?????sourceMap: options.sourceMap ???} ?} ?// generate loader string to be used with extract text plugin ?function generateLoaders (loader, loaderOptions) { ???var loaders = [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) { ?????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: generateLoaders(), ???postcss: generateLoaders(), ???less: generateLoaders(‘less‘), ???sass: generateLoaders(‘sass‘, { indentedSyntax: true }), ???scss: generateLoaders(‘sass‘), ???stylus: generateLoaders(‘stylus‘), ???styl: generateLoaders(‘stylus‘) ?}}// Generate loaders for standalone style files (outside of .vue)exports.styleLoaders = function (options) { ?var output = [] ?var loaders = exports.cssLoaders(options) ?for (var extension in loaders) { ???var loader = loaders[extension] ???output.push({ ?????test: new RegExp(‘\\.‘ + extension + ‘$‘), ?????use: loader ???}) ?} ?return output}