成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue-cli中配置webpack系列文章三 ------ utils.js

馬龍駒 / 2979人閱讀

摘要：設(shè)置靜態(tài)文件的公共路徑，用于修改屬性的值通常用于某個的根據(jù)不同的環(huán)境到對公共路徑進行配置并與傳入的文件名稱進行合并加載器的相關(guān)配置根據(jù)不同的環(huán)境配置是否要對文件進行壓縮根據(jù)傳入的配置決定是否生成用于調(diào)試定義名為的函數(shù)用于配置或預(yù)處理

utils.js

  var path = require("path")
  var config = require("../config")
  var ExtractTextPlugin = require("extract-text-webpack-plugin")
  // 設(shè)置靜態(tài)文件的公共路徑，用于修改src屬性的值（通常用于某個loader的options）
  exports.assetsPath = function (_path) {
    // 根據(jù)不同的環(huán)境到對公共路徑進行配置并與傳入的文件名稱進行合并
    var assetsSubDirectory = process.env.NODE_ENV === "production"
      ? config.build.assetsSubDirectory
      : config.dev.assetsSubDirectory
    return path.posix.join(assetsSubDirectory, _path)
  }
  // css加載器的相關(guān)配置
  exports.cssLoaders = function (options) {
    options = options || {}
    var cssLoader = {
      loader: "css-loader",
      options: {
        // 根據(jù)不同的環(huán)境配置是否要對css文件進行壓縮
        minimize: process.env.NODE_ENV === "production",
        // 根據(jù)傳入的配置決定是否生成sourceMap用于調(diào)試bug
        sourceMap: options.sourceMap
      }
    }
    // 定義名為"generateLoaders"的函數(shù)用于配置css或css預(yù)處理器文件
    function generateLoaders (loader, loaderOptions) {
      var loaders = [cssLoader]
      // 如果有css預(yù)處理器文件（如less、sass、stylus等）
      if (loader) {
        loaders.push({
          // 使用該預(yù)處理器對應(yīng)的加載器
          loader: loader + "-loader",
          // 創(chuàng)建一個空對象，將css加載器初始配置與該預(yù)處理器的特殊配置進行合并
          options: Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap
          })
        })
      }
      // 是否將入口文件（main.js）中引入的css文件一起打包進該文件的css中
      // 根據(jù)傳入的options.extract的值進行判斷（一般在生產(chǎn)環(huán)境中會去多帶帶打包）
      if (options.extract) {
        return ExtractTextPlugin.extract({
          use: loaders,
          fallback: "vue-style-loader"
        })
      } else {
        return ["vue-style-loader"].concat(loaders)
      }
    }
    return {
      css: generateLoaders(),
      postcss: generateLoaders(),
      less: generateLoaders("less"),
      sass: generateLoaders("sass", { indentedSyntax: true }),
      scss: generateLoaders("sass"),
      stylus: generateLoaders("stylus"),
      styl: generateLoaders("stylus")
    }
  }
  // 對.vue文件之外的css文件或css預(yù)處理器文件進行處理
  exports.styleLoaders = function (options) {
    var output = []
    var loaders = exports.cssLoaders(options)
    // 循環(huán)cssLoaders返回出來的所有文件類型
    for (var extension in loaders) {
      var loader = loaders[extension]
      // 對每一個文件類型用其相對應(yīng)的加載器進行處理
      output.push({
        test: new RegExp("." + extension + "$"),
        use: loader
      })
    }
    return output
  }

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109652.html

相關(guān)文章

  • vue-cli解析

    摘要：在中，設(shè)置了一些配置，代碼如下通過它的注釋，我們可以理解它在中配置了靜態(tài)路徑本地服務(wù)器配置項等參數(shù)。下面還有一個的對象，它是在本地服務(wù)器啟動時，打包的一些配置，代碼如下其中包括模版文件的修改，打包完目錄之后的一些路徑設(shè)置，壓縮等。 前言 這段時間，算是空出手來寫幾篇文章了。由于很久都沒有時間整理現(xiàn)在所用的東西了，所以，接下來會慢慢整理出一些文檔來記錄前段時間的工作和生活。 這篇文章的主...

    KunMinX 評論0 收藏0

  • vue學(xué)習(xí)系列（二）vue-cli

    摘要：一介紹是官方提供的腳手架，用來快速建立項目。標識項目名稱，這個你可以根據(jù)自己的項目來起名字。初始化完成之后，進入安裝目錄，必須先安裝項目依賴，否則無法運行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。 一.介紹 vue-cli是官方提供的腳手架，用來快速建立項目。 二.安裝 npm install vue-cli -g//全局安裝 三.初始化項目 vue init ...

    baishancloud 評論0 收藏0

  • webpack開發(fā)與生產(chǎn)環(huán)境配置

    摘要：豹哥對于剛開始小白的自己雖然現(xiàn)在也白知無不談，而且回復(fù)超快超認真。這里真的很感謝豹哥。是項目啟動時的一些文件，如的配置文件開發(fā)環(huán)境服務(wù)配置文件一些簡單工具函數(shù)等等。是關(guān)于整個項目的環(huán)境配置包括開發(fā)與生產(chǎn)。 前言 作者去年就開始使用webpack, 最早的接觸就來自于vue-cli。那個時候工作重點主要也是 vue 的使用，對webpack的配置是知之甚少，期間有問題也是詢問大牛 @呂大...

    afishhhhh 評論0 收藏0

  • Vue-cli 命令行工具分析

    摘要：文章來源命令行工具分析命令行工具分析提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。其他模式的配置文件以此為基礎(chǔ)通過合并。 文章來源：Vue-cli 命令行工具分析 Vue-cli 命令行工具分析 Vue.js 提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。vue-webpack-boilerplate，官方定義為： full-featured Webpack setup ...

    LoftySoul 評論0 收藏0

  • vue-cli webpack配置分析

    相信vue使用者對vue-cli都不會陌生，甚至可以說，很熟悉了，但對其webpack的配置可能知之甚少吧。 過完年回來后，我接手了公司的新項目。新項目是一個spa。很自然，我就想到了vue-cli腳手架了，當(dāng)時研究一下它的webpack配置。于是，就有了其他的內(nèi)容。 今天這篇文章，是在原來的基礎(chǔ)上，增加了一些新版本的內(nèi)容，但實質(zhì)上變化不大。 說明 此倉庫為vue-cli webpack的配置分析...

    suemi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<