Vue-loader使用教程
簡介
說明
本文介紹vue-loader的作用及其用法。
官網(wǎng)網(wǎng)址
https://vue-loader.vuejs.org/zh/
Vue-loader是什么
Vue-loader其實就是一個webpack的loader,用來把vue組件轉(zhuǎn)換成可部署的js, html, css模塊。
預處理器示例(sass-loader)
官網(wǎng)網(wǎng)址:https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass
在webpack中,所有預處理器都要匹配相應的loader。vue-loader允許其他的webpack-loader處理組件中的一部分,然后它根據(jù)lang屬性自動判斷出要使用的loaders。
以scss為例,只要安裝處理sass/scss的loader,就能在vue中使用scss了。
現(xiàn)在我們來安裝sass/scss loader:
npm install -D sass-loader node-sass
vue-loader允許能根據(jù)lang屬性自動判斷出要使用的loaders,它是怎么樣做到的?下面來看一看最核心部分的源代碼:
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}上述這段代碼讓vue-loader有了這種能力,它會根據(jù)不同的文件去使用不同的loader。
到此這篇關于Vue-loader使用教程的文章就介紹到這了,更多相關Vue-loader使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue下滾動到頁面底部無限加載數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue下滾動到頁面底部無限加載數(shù)據(jù)的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue框架和react框架的區(qū)別以及各自的應用場景使用
這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應用場景使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果
這篇文章主要介紹了vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果,本文分步驟通過實例代碼講解的非常詳細,需要的朋友可以參考下2019-11-11
淺析webpack-bundle-analyzer在vue-cli3中的使用
這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10

