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 {
               return ['vue-style-loader'].concat(loaders)
           }
           // 上面這段代碼就是用來返回最終讀取和導入loader，來處理對應類型的文件
       }
   
       // https://vue-loader.vuejs.org/en/configurations/extract-css.html
       return {
           css: generateLoaders(), // css對應 vue-style-loader 和 css-loader
           postcss: generateLoaders(), // postcss對應 vue-style-loader 和 css-loader
           less: generateLoaders('less'), // less對應 vue-style-loader 和 less-loader
           sass: generateLoaders('sass', { indentedSyntax: true }), // sass對應 vue-style-loader 和 sass-loader
           scss: generateLoaders('sass'), // scss對應 vue-style-loader 和 sass-loader
           stylus: generateLoaders('stylus'), // stylus對應 vue-style-loader 和 stylus-loader
           styl: generateLoaders('stylus') // styl對應 vue-style-loader 和 styl-loader 
       }
   }
   
   // Generate loaders for standalone style files (outside of .vue)
   // 下面這個主要處理import這種方式導入的文件類型的打包，上面的exports.cssLoaders是爲這一步服務的
   exports.styleLoaders = function (options) {
       var output = []
       // 下面就是生成的各類css文件的loader對象
       var loaders = exports.cssLoaders(options)
       for (var extension in loaders) {
           // 把每一種文件的laoder都提取出來
           var loader = loaders[extension]
           output.push({
               // 把最終的結果都push到output數組中，大事搞定
               test: new RegExp('\\.' + extension + '$'),
               use: loader
           })
       }
       return output
   }
   
   

   註釋：
   (1)extract-text-webpack-plugin插件是用來將文本從bundle中提取到一個單獨的文件中
      基本使用方法以下
      const ExtractTextPlugin = require("extract-text-webpack-plugin");
      module.exports = {
          module: {
              rules: [
                  {
                      test: /\.css$/, //主要用來處理css文件
                      use: ExtractTextPlugin.extract({
                          fallback: "style-loader", // fallback表示若是css文件沒有成功導入就使用style-loader導入
                          use: "css-loader" // 表示使用css-loader從js讀取css文件
                      })
                  }
              ],
              plugins: [
                  new ExtractTextPlugin("styles.css") //表示生成styles.css文件
              ]
          }
      }

   轉載自：

   葉家偉的博客http://www.cnblogs.com/ye-hcj/p/7078047.html