Vue-loader使用教程
簡介
說明
本文介紹vue-loader的作用及其用法。
官網網址
https://vue-loader.vuejs.org/zh/
Vue-loader是什麼
Vue-loader其實就是一個webpack的loader,用來把vue組件轉換成可部署的js, html, css模塊。
預處理器示例(sass-loader)
官網網址:https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass
在webpack中,所有預處理器都要匹配相應的loader。vue-loader允許其他的webpack-loader處理組件中的一部分,然後它根據lang屬性自動判斷出要使用的loaders。
以scss為例,隻要安裝處理sass/scss的loader,就能在vue中使用scss瞭。
現在我們來安裝sass/scss loader:
npm install -D sass-loader node-sass
vue-loader允許能根據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有瞭這種能力,它會根據不同的文件去使用不同的loader。
到此這篇關於Vue-loader使用教程的文章就介紹到這瞭,更多相關Vue-loader使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue中配置scss全局變量的步驟
- 在vue項目中引入scss並使用scss樣式詳解
- Vue報錯Syntax Error:TypeError: this.getOptions is not a function的解決方法
- vue+vux vux安裝出現錯誤問題及解決
- webpack搭建vue環境時報錯異常解決