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

馬龍駒發布于2019-08-26 13:50 / 2971人閱讀

摘要：設置靜態文件的公共路徑，用于修改屬性的值通常用于某個的根據不同的環境到對公共路徑進行配置并與傳入的文件名稱進行合并加載器的相關配置根據不同的環境配置是否要對文件進行壓縮根據傳入的配置決定是否生成用于調試定義名為的函數用于配置或預處理

utils.js

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

云服務器 GPU云服務器系列三 webpack cdn配置 webpack配置cdn webpack常用配置項

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109652.html

vue-cli解析

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

KunMinX 2019-08-21 18:24 評論0 收藏0
vue學習系列（二）vue-cli

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

baishancloud 2019-08-26 11:50 評論0 收藏0
webpack開發與生產環境配置

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

afishhhhh 2019-08-20 18:32 評論0 收藏0
Vue-cli 命令行工具分析

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

LoftySoul 2019-08-21 17:44 評論0 收藏0
vue-cli webpack配置分析

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

suemi 2019-08-21 11:35 評論0 收藏0