資訊專欄INFORMATION COLUMN
摘要：設(shè)置靜態(tài)文件的公共路徑，用于修改屬性的值通常用于某個(gè)的根據(jù)不同的環(huán)境到對(duì)公共路徑進(jìn)行配置并與傳入的文件名稱進(jìn)行合并加載器的相關(guān)配置根據(jù)不同的環(huán)境配置是否要對(duì)文件進(jì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屬性的值（通常用于某個(gè)loader的options）
exports.assetsPath = function (_path) {
// 根據(jù)不同的環(huán)境到對(duì)公共路徑進(jìn)行配置并與傳入的文件名稱進(jì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)境配置是否要對(duì)css文件進(jìn)行壓縮
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ù)處理器對(duì)應(yīng)的加載器
loader: loader + "-loader",
// 創(chuàng)建一個(gè)空對(duì)象，將css加載器初始配置與該預(yù)處理器的特殊配置進(jìn)行合并
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// 是否將入口文件（main.js）中引入的css文件一起打包進(jìn)該文件的css中
// 根據(jù)傳入的options.extract的值進(jìn)行判斷（一般在生產(chǎn)環(huán)境中會(huì)去多帶帶打包）
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")
}
}
// 對(duì).vue文件之外的css文件或css預(yù)處理器文件進(jìn)行處理
exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
// 循環(huán)cssLoaders返回出來的所有文件類型
for (var extension in loaders) {
var loader = loaders[extension]
// 對(duì)每一個(gè)文件類型用其相對(duì)應(yīng)的加載器進(jìn)行處理
output.push({
test: new RegExp("." + extension + "$"),
use: loader
})
}
return output
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109652.html
摘要：在中，設(shè)置了一些配置，代碼如下通過它的注釋，我們可以理解它在中配置了靜態(tài)路徑本地服務(wù)器配置項(xiàng)等參數(shù)。下面還有一個(gè)的對(duì)象，它是在本地服務(wù)器啟動(dòng)時(shí)，打包的一些配置，代碼如下其中包括模版文件的修改，打包完目錄之后的一些路徑設(shè)置，壓縮等。 前言 這段時(shí)間，算是空出手來寫幾篇文章了。由于很久都沒有時(shí)間整理現(xiàn)在所用的東西了，所以，接下來會(huì)慢慢整理出一些文檔來記錄前段時(shí)間的工作和生活。 這篇文章的主...
摘要：一介紹是官方提供的腳手架，用來快速建立項(xiàng)目。標(biāo)識(shí)項(xiàng)目名稱，這個(gè)你可以根據(jù)自己的項(xiàng)目來起名字。初始化完成之后，進(jìn)入安裝目錄，必須先安裝項(xiàng)目依賴，否則無法運(yùn)行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。 一.介紹 vue-cli是官方提供的腳手架，用來快速建立項(xiàng)目。 二.安裝 npm install vue-cli -g//全局安裝 三.初始化項(xiàng)目 vue init ...
摘要：豹哥對(duì)于剛開始小白的自己雖然現(xiàn)在也白知無不談，而且回復(fù)超快超認(rèn)真。這里真的很感謝豹哥。是項(xiàng)目啟動(dòng)時(shí)的一些文件，如的配置文件開發(fā)環(huán)境服務(wù)配置文件一些簡(jiǎn)單工具函數(shù)等等。是關(guān)于整個(gè)項(xiàng)目的環(huán)境配置包括開發(fā)與生產(chǎn)。 前言 作者去年就開始使用webpack, 最早的接觸就來自于vue-cli。那個(gè)時(shí)候工作重點(diǎn)主要也是 vue 的使用，對(duì)webpack的配置是知之甚少，期間有問題也是詢問大牛 @呂大...
摘要：文章來源命令行工具分析命令行工具分析提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。其他模式的配置文件以此為基礎(chǔ)通過合并。 文章來源：Vue-cli 命令行工具分析 Vue-cli 命令行工具分析 Vue.js 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。vue-webpack-boilerplate，官方定義為： full-featured Webpack setup ...
相信vue使用者對(duì)vue-cli都不會(huì)陌生，甚至可以說，很熟悉了，但對(duì)其webpack的配置可能知之甚少吧。 過完年回來后，我接手了公司的新項(xiàng)目。新項(xiàng)目是一個(gè)spa。很自然，我就想到了vue-cli腳手架了，當(dāng)時(shí)研究一下它的webpack配置。于是，就有了其他的內(nèi)容。 今天這篇文章，是在原來的基礎(chǔ)上，增加了一些新版本的內(nèi)容，但實(shí)質(zhì)上變化不大。 說明 此倉(cāng)庫(kù)為vue-cli webpack的配置分析...
閱讀 1877·2021-11-24 10:21
閱讀 1306·2021-09-22 15:25
閱讀 3225·2019-08-30 15:55
閱讀 771·2019-08-30 15:54
閱讀 3529·2019-08-30 14:20
閱讀 1714·2019-08-30 14:06
閱讀 694·2019-08-30 13:11
閱讀 3252·2019-08-29 16:43
