Loader

style-resources-loader 利用此loader将款式资源（例如变量、mixin）注入到sass、scss、less、stylus等模块中通过在工作中的利用场景，来介绍此loader用法和一些发散的点 场景需要我的项目构造如下： ├─views ├─componets 组件目录 | ├─brand1 组件1 | ├─cmp.vue | ├─... | └─brand2 组件2 | ├─cmp.vue | ├─... ├─theme 主题目录 (每个主题中色彩变量可能会反复) | ├─brand1.less 组件1主题色彩变量 | └─brand2.less 组件2主题色彩变量 | └─other.less 其余主题色彩变量 └─... 需要： 组件目录应用对应的主题色彩变量，其余目录应用主题3色彩变量应用主题色彩变量时不须要每次独自@import '@/theme/brandx.less'解决方案module: { rules: [ { test: /\.less$/i, use: [MiniCssExtractPlugin.loader, "css-loader", 'less-loader'], }, { test: /components\\brand1.*\.less$/i, use: [{ loader: 'style-resources-loader', options: { patterns: [path.resolve(__dirname, 'src/theme/brand1.less')] }, }], }, { test: /components\\brand2.*\.less$/i, use: [{ loader: 'style-resources-loader', options: { patterns: [path.resolve(__dirname, 'src/theme/brand2.less')] }, }], }, { test: /[^components\\].*\.less$/i, use: [{ loader: 'style-resources-loader', options: { patterns: [path.resolve(__dirname, 'src/theme/brand3.less')] }, }], }, ] },发散点loader匹配规定loader会把非js的文件转换为js文件，不同类型的文件依据定义的rules中不同test去匹配相应的loader进行解决，这里对vue组件中款式文件的解决其实是先通过了vue-loader将.vue文件中的<style lang="less">局部转换为less文件后，再由其余匹配此规定的loader进行解决 ...

原文地址 1 什么是 vue-loadervue-loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件的格式撰写 Vue 组件。2 如何使用 vue-loader2.1 安装npm install vue-loader vue-template-compiler --save-dev2.2 配置 webapck// webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = { mode: 'development', module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, // 它会应用到普通的 `.js` 文件 // 以及 `.vue` 文件中的 `<script>` 块 { test: /\.js$/, loader: 'babel-loader' }, // 它会应用到普通的 `.css` 文件 // 以及 `.vue` 文件中的 `<style>` 块 { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] }, plugins: [ // 请确保引入这个插件来施展魔法 new VueLoaderPlugin() ]}2.3 创建一个 Vue 组件一个标准的 Vue 组件可以分为三部分： ...

原文地址 前言webpack loaders 系列文章： 10 分钟搞定 file-loader10 分钟搞定 url-loader搞定 style-loader什么是 style-loaderstyle-loader 的功能就一个，在 DOM 里插入一个 <style> 标签，并且将 CSS 写入这个标签内。 简单来说就是这样： const style = document.createElement('style'); // 新建一个 style 标签style.type = 'text/css';style.appendChild(document.createTextNode(content)) // CSS 写入 style 标签document.head.appendChild(style); // style 标签插入 head 中稍后会详细分析源码，看看和我们的思路是否一致。 如何使用 style-loader1. 安装 style-loadernpm install style-loader --save-dev2. 配置 webapck// webpack.config.jsmodule.exports = { module: { rules: [ { test: /\.(css)$/, use: [ { loader: 'style-loader', options: {}, }, { loader: 'css-loader' }, ], }, ], },};日常的开发中处理样式文件时，一般会使用到 style-loader 和 css-loader 这两个 loader。 ...

原文地址 什么是 url-loaderurl-loader 会将引入的文件进行编码，生成 DataURL，相当于把文件翻译成了一串字符串，再把这个字符串打包到 JavaScript。 什么时候使用一般来说，我们会发请求来获取图片或者字体文件。如果图片文件较多时（比如一些 icon），会频繁发送请求来回请求多次，这是没有必要的。此时，我们可以考虑将这些较小的图片放在本地，然后使用 url-loader 将这些图片通过 base64 的方式引入代码中。这样就节省了请求次数，从而提高页面性能。 如何使用1. 安装 url-loadernpm install url-loader --save-dev2. 配置 webapckmodule.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: {}, }, ], }, ], },};3. 引入一个文件，可以是 import（或 require）import logo from '../assets/image/logo.png';console.log('logo的值: ', logo); // 打印一下看看 logo 是什么简单三步就搞定了。 4. 见证奇迹的时刻webpack执行 webpack 之后，dist 目录只生成了一个 bundle.js。和 file-loader 不同的是，没有生成我们引入的那个图片。上文说过，url-loader 是将图片转换成一个 DataURL，然后打包到 JavaScript 代码中。 那我们就看看 bundle.js 是否有我们需要的 DataURL： ...

原文地址 什么是 file-loader简单来说，file-loader 就是在 JavaScript 代码里 import/require 一个文件时，会将该文件生成到输出目录，并且在 JavaScript 代码里返回该文件的地址。 如何使用1. 安装 file-loadernpm install file-loader --save-dev2. 配置 webapck// webpack.config.jsmodule.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: {}, }, ], }, ], },};关于 file-loader 的 options，这里就不多说了，见 file-loader options . 3. 引入一个文件，可以是 import（或 require）import logo from '../assets/image/logo.png';console.log('logo的值: ', logo); // 打印一下看看 logo 是什么简单三步就搞定了。 4. 见证奇迹的时刻webpack执行 webpack 打包之后，dist 目录下会生成一个打包好的 bundle.js，这个就不多说了。 如果使用了 file-loader， dist 目录这时候会生成我们用到的那个文件，在这里也就是 logo.png。 ...

【版本】vue-cli3webpack@4.33.0【步骤】1、安装插件vue-markdown-loader npm i vue-markdown-loader -Dps：这个插件是基于markdown-it的，不需要单独安装markdown-it。 2、修改vue.config.js配置文件（如果没有，在项目根目录新建一个）： module.exports = { chainWebpack: config => { config.module.rule('md') .test(/\.md/) .use('vue-loader') .loader('vue-loader') .end() .use('vue-markdown-loader') .loader('vue-markdown-loader/lib/markdown-compiler') .options({ raw: true }) }}3、直接上代码 App.vue <template> <my-markdown></my-markdown></template><script>import myMarkdown from './assets/cpu.md';export default { components: { myMarkdown },</script>正常情况下，到这里就结束了。 【坑】由于业务给我的Markdown文档的标题是这样的： ##物理CPU个数物理CPU数就是主板上实际插入的CPU数量……得到的结果并不让我满意： 折腾了大半天才发现，这是由于标题的#井号和文字之间没有空格导致的。证明见下： var MarkdownIt = require('markdown-it'),md = new MarkdownIt();console.log(md.render('# markdown-it rulezz!'))//<h1>markdown-it rulezz!</h1>console.log(md.render('#markdown-it rulezz!'))//<p>#markdown-it rulezz!</p>Fine :) 愚蠢的我想出了一个解决办法：因为HyperDown.js能避免上面那样的情况，于是我用它来对文档做预处理。 安装HyperDown.js npm install hyperdown -D然后把vue.config.js改成了这样。 let HyperDown = require('hyperdown');let parser = new HyperDown;module.exports = { chainWebpack: config => { config.module.rule('md') .test(/\.md/) .use('vue-loader') .loader('vue-loader') .end() .use('vue-markdown-loader') .loader('vue-markdown-loader/lib/markdown-compiler') .options({ // markdown-it config preset: 'default', breaks: true, raw: true, typographer: true, preprocess: function(markdownIt, source) { return parser.makeHtml(source);//重点在这里！！！ } }) }}END ...

一、全局配置less 1.下载插件**vue add style-resources-loader**vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果上面安装失败的话，就分别安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader（前提是已经安装过 less less-loader） // 没有出错的话，可以无视这里 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 或 yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D** 第二步配置vue.config.js const path = require("path"); module.exports = { ... pluginOptions: { "style-resources-loader": { preProcessor: "less", patterns: [ //这个是加上自己的路径， //注意：试过不能使用别名路径 path.resolve(__dirname, "./src/assets/variable.less") ] } } ... }或者使用官网的自动导入在chainWebpack中引入https://cli.vuejs.org/zh/guid... 二、全局配置sass（直接配置vue.config.js） 注意：官网独爱sass，这种loader的形式只有sass才合适用，其他的（less、stylus）都会报错。 module.exports = { ... css: { loaderOptions: { sass: { // @是src的别名 data: ` @import "@/assets/variable.scss"; ` } } } ... }

本文不会介绍loader的一些使用方法，不熟悉的同学请自行查看Webpack loader1、背景首先我们来看一下为什么需要loader，以及他能干什么?webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。 本质上来说，loader 就是一个 node 模块，这很符合 webpack 中「万物皆模块」的思路。既然是 node 模块，那就一定会导出点什么。在 webpack 的定义中，loader 导出一个函数，loader 会在转换源模块resource的时候调用该函数。在这个函数内部，我们可以通过传入 this 上下文给 Loader API 来使用它们。最终装换成可以直接引用的模块。 2、xml-Loader 实现前面我们已经知道，由于 Webpack 是运行在 Node.js 之上的，一个 Loader 其实就是一个 Node.js 模块，这个模块需要导出一个函数。 这个导出的函数的工作就是获得处理前的原内容，对原内容执行处理后，返回处理后的内容。一个简单的loader源码如下 module.exports = function(source) { // source 为 compiler 传递给 Loader 的一个文件的原内容 // 该函数需要返回处理后的内容，这里简单起见，直接把原内容返回了，相当于该 Loader 没有做任何转换 return source;};由于 Loader 运行在 Node.js 中，你可以调用任何 Node.js 自带的 API，或者安装第三方模块进行调用： const xml2js = require('xml2js');const parser = new xml2js.Parser();module.exports = function(source) { this.cacheable && this.cacheable(); const self = this; parser.parseString(source, function (err, result) { self.callback(err, !err && "module.exports = " + JSON.stringify(result)); });};这里我们事简单实现一个xml-loader; ...

场景说明// 这是一个存放变量的scss文件 “@/styles/_variables.scss”// color font …$cf-light: #B6B6B6;$cf-gray: #8C8C8C;$cf-med: #505050;$cf-dark: #333333;$cf-highlight: #1775F0;我要在其他文件内都用这个来保证样式统一。比如某个组件<template> <div class=“notice”>注意！</div></template><style lang=“scss” scoped>.notice { color: $cf-highlight;}</style>这样就报错了。要改成下面这样<template> <div class=“notice”>注意！</div></template><style lang=“scss” scoped>@import “@/styles/_variables.scss”;.notice { color: $cf-highlight;}</style>简单描述一下：做Vue项目的时候，有时候我们预先设置了一个主题样式文件（_variables.scss），存放大量的定义的SASS变量，需要在不同的组件中使用，默认是无法使用的，除非每个组件内都引入这个_variables.scss文件，十分麻烦，这里提供几种方案。解决办法我有几个解决方案，理论上都可行，大家不妨根据实际应用场景来实践一下。使用sass-resources-loader如果项目使用Vue-cli 2/3，或者Vue项目用的Webpack，用这个loader都是可以的。官方对于各种场景已经写的很清楚了，请看sass-resources-loader。具体不说明了。Vue-cli 3.x 下的最方便的方案这个我还没实践，不过应该是可行的。。。给小白们自己去试，好用的话记得留言回复下哦打开vue.config.js文件，进行如下配置：module.exports = { css: { loaderOptions: { sass: { data: @import "@/styles/_variables.scss"; } } }};具体细节，请阅读：Globally Load SASS into your Vue.js ApplicationsHow to Import a Sass File into Every Vue Component in an App这两篇原理相同，就是细节上有点不同，怕有的打不开就放两个给大家研究下。Nuxt这里还是接住一个插件style-resources-module，这个最近才出的，高级很多，在他之前，都是用nuxt-sass-resources-loader，如果你的项目还在用旧的，可以换成新的。nuxt-sass-resources-loader官方也说了不在更新维护，建议使用style-resources-module。怎么用呢？这里有Example，我也复制一份，醒目。打开nuxt.config.jsexport default { modules: [’@nuxtjs/style-resources’], styleResources: { scss: [ ‘./assets/styles/_variables.scss’, ‘./assets/styles/mixins.scss’ // use underscore “” & also file extension “.scss” ] }}自己注意文件路径结语现在不用每个组件都写导入变量文件了，是不是轻松多了，也不会因为文件名，路径调整，而胆战心惊的文件批量替换。我为什么写这个文章，因为虽然以前研究过，但是时代变化很快，一些更好的方案出现了，但是很多人依旧采用旧的，可能在新的项目上带来一些问题，所以就更新了。（小字，看不见）：其次，我其实在使用easywebpack的egg+vue脚手架遇到了这个问题，搞了半天没搞好。。。去官方群里问没人鸟我，于是凄惨退群（底层技术渣的待遇）。参考：Load a global settings.scss file in every vue component? ...

Loader的使用之前的博文已经介绍了Loader的概念以及用法，webpack 可以使用 loader 来预处理文件，这允许你打包除 JavaScript 之外的任何静态资源， 甚至允许你直接在 JavaScript 模块中 import CSS文件。在 src 目录下新建 components 文件夹，新建 modal 组件： 编写代码：<!–modal.ejs–><div class=“modal-parent”> <div class=“modal-header”> <h3 class=“modal-title”><%= title %></h3> </div> <div class=“modal-body”> <%= content %> </div> <div class=“modal-footer”> <%= footer %> </div></div>// modal.jsimport template from ‘./modal.ejs’export default function modal () { return { name: ‘modal’, template: template }}修改 main.js：import Modal from ‘./components/modal/modal’const App = function () { let div = document.createElement(‘div’) div.setAttribute(‘id’, ‘app’) document.body.appendChild(div) let dom = document.getElementById(‘app’) let modal = new Modal() dom.innerHTML = modal.template({ title: ‘标题’, content: ‘内容’, footer: ‘底部’ })}const app = new App() 此时执行 npm run build 会报错 ： webpack 无法解析 .ejs 文件，因此我们需要安装对应的 loader：npm i ejs-loader -D 并修改 webpack.config.js 添加 module 属性：module: { rules: [ { test: /.ejs$/, use: [’ejs-loader’] } ] }再次执行 npm run build 就不会报错了，打开 dist/index.html ： 可以看到我们的 modal 组件已经成功渲染出来了。 2. 处理项目中的CSS文件在 modal.css 中加入样式代码：.modal-parent{ width: 500px; height: auto; border: 1px solid #ddd; border-radius: 10px;}.modal-title{ font-size: 20px; text-align: center; padding: 10px; margin: 0;}.modal-body{ border: 1px solid #ddd; border-left: 0; border-right: 0; padding: 10px;}.modal-footer{ padding: 10px;}安装 css-loader 和 style-loader：npm i css-loader style-loader -D 修改webpack.config.js 中的 module.rules ，添加css-loader 和 style-loader：module: { rules: [ { test: /.ejs$/, use: [’ejs-loader’] }, { test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] } ] },在 modal.js 中引入 modal.css：import ‘./modal.css’再次执行 npm run build ，打开 dist/index.html： CSS样式已经通过 style 标签添加到页面上了； 3. 处理项目中的图片 在src目录下创建 assets/img ，放入两张图片 给 modal 添加一个背景图的样式：.modal-body{ border: 1px solid #ddd; border-left: 0; border-right: 0; padding: 10px; background: url("../../assets/img/bg.jpg"); color: #fff; height: 500px;}由于webpack无法处理图片资源，所以也要安装对应的 loadernpm install –save-dev url-loader file-loader在 webpack.config.js 中添加 loader rules: [ { test: /.ejs$/, use: [’ejs-loader’] }, { test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] }, { test: /.(jpg|jpeg|png|gif|svg)$/, use: ‘url-loader’ } ]打包代码之后，在浏览器打开 dist/index.html ，可见图片已经显示出来了： 仔细查看这张图片可以发现，它是通过 DataURL 加载出来的： 下面更改 url-loader 的配置，limit表示在文件大小低于指定值时，返回一个DataURL{ test: /.(jpg|jpeg|png|gif|svg)$/, use: [ { loader: ‘url-loader’, options: { name: ‘[name]-[hash:5].[ext]’, limit: 1024 } } ] }再次打包后，图片会以文件形式展示出来： 本人才疏学浅，不当之处欢迎批评指正