手撕vue-cli配置——utils.js篇

阿新 • • 發佈：2019-01-18

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.json
const pkg = require('../package.json')

exports.assetsPath = function (_path) {
//結合config檔案的程式碼可以知道，當環境為生產環境時，assetSubDirectory為“static”,開發環境也是“static”  
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory  
  
 
// path.posix.join()是path.join的一種相容性寫法，它的作用是路徑的拼接，比如path.posix.join("/c/aa',"bb"); // "c/aa/bb"
  return path.posix.join(assetsSubDirectory, _path)
}

//用來生成Loader的函式 ，本身可以用在vue-loader的配置上(vue-loader.config.js檔案，以後我會提這個檔案)，同時也是為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-loader',
    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.conf.js中）
exports.styleLoaders = function (options) {
  const output = []
  //呼叫cssLoaders方法，返回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
}

手撕vue-cli配置——utils.js篇

utils.js檔案主要是用來處理各種css loader的，比如css-loader，less-loader等。 //引入path模組 const path = require('path') //引入之前的config模組 const config = require('../config') //

手撕vue-cli配置檔案——config篇

最近一直在研究webpack，突然想看看vue-cli中的webpack是如何配置，查閱了很多相關的文章，所以也想出幾篇關於vue-cli配置的東西。正所謂“工欲善其事必先利其器”嘛！這一篇主要是分析vue中關於config資料夾中的相關程式碼；首先我們先看一下config的檔案結構： |-config

手撕vue-cli配置文件——check-versions.js篇

pac 更多分代常用改變 engines shell. 檢測 emp check-versions.js，vue-cli中檢查版本的js文件。 ‘use strict‘ const chalk = require(‘chalk‘) const semver = re

手撕vue-cli配置檔案——check-versions.js篇

check-versions.js，vue-cli中檢查版本的js檔案。 'use strict' const chalk = require('chalk') const semver = require('semver') const packageConfig = require('../packag

手撕vue-cli配置——webpack.prod.conf.js篇

'use strict' const path = require('path') const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const me

手撕vue-cli配置——webpack.dev.conf.js篇

const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path

手撕vue-cli配置——webpack.base.conf.js篇

在開始寫webpack.base.conf.js（簡稱base）之前，我們先來看一下vue-loader.conf.js這個檔案，畢竟在base中我們還會用到： 'use strict' //引入前一篇文章的utils檔案 const utils = require('./utils') //引入conf

vue-cli的utils.js文件詳解

ssi directory || ttext tps use conf ini fall utils.js文件 // 引入nodejs路徑模塊var path = require(‘path‘)// 引入config目錄下的index.js配置文件 var config

vuejs第二篇 vue-cli配置移動端自適配（引入flexible）

原文網址 http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 1.

vue-cli配置postcss

fig plugins mod all port exp gin com css 1. npm install postcss-cssnext -D npm install postcss-import -D npm install postcss-loader-D 2.

vue-cli 配置項目名和域名

bsp cal mage ges run 圖片反向 http image 默認運行 npm run dev 域名為localhost：8080 但是需要配置反向代理，這時候就需要去配置域名跟項目名 vue-cli 配置項目名和域名

vue-cli配置axios，並基於axios進行後臺請求函式封裝

文章https://www.cnblogs.com/XHappyness/p/7677153.html已經對axios配置進行了說明，後臺請求時可直接this.$axios直接進行。這裡的缺點是後端請求會散亂在各個元件中，導致複用和維護艱難。升級：將請求封裝在一個檔案中並加上型別宣告步驟： &nbs

vue-cli配置多頁面專案

背景：vue-cli版本3.0 省略初始化專案；預設的App.vue和index.html檔案可以刪掉頁面結構如上圖，新加的home可以不要，注意下面的檔案路徑就行接下來修改配置檔案： 1、修改build/utils.js /* 這裡是新

vue-cli中util.js詳細解讀

本文轉載自http://www.cnblogs.com/ye-hcj/p/7078047.html，在此基礎上做了部分修改程式碼： // 引入nodejs路徑模組 var path = require('path') // 引入config目錄下的index.js配置檔案 var conf

vue-cli配置檔案——config資料夾

首先我們先看一下config的檔案結構： |-config |—dev.env.js |—index.js |—prod.env.js 開啟我們的vue專案資料夾我們可以清楚的看到資料夾下的三個檔案，“dev.env.js”，“index.js”，“prod.e

vue-cli配置自定義路徑

resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@':resolve('../src'), 'common': path.resolve(__dirname, '../src/common'),

快速入門vue-cli配置

const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path

Vue cli 引入第三方JS和CSS的常用方法

如果要引入第三方JS或者css 最好是把檔案放在statis資料夾下，此處是靜態檔案存放的位置第一種方法：直接在index.html中引入 js <script type="

vue-cli配置less

1. 下載less less-loader npm i less less-loader -S 2.配置less 安裝成功後，開啟 build/webpack.base.conf.js ，

vue-cli配置檔案解釋

{ "name": "vue-lesson", "description": "A Vue.js project", "version": "1.0.0", "author": "wan

手撕vue-cli配置——utils.js篇

相關推薦