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.jsonconst 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}