标签:load 传递 css this time 通过 匹配 除了 export
webpack中一切都是模块,除了.js文件,所有模块都需要相应的loader进行打包导出为js对象才能使用。
通过向数组webpack.config.module.rules
push如下规则对象,就可以通过文件名设置loader规则。
rules: [
// test:文件名匹配正则,loader:相应文件的loader
{ test: /\.vue$/, loader: 'vue-loader', },
// 使用use以数组方式传递多个loader,同时loader可以传入携带选项参数的对象
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader', ], },
// 也可以使用下面的query方式提供选项参数
{ test: /\.(?:jpg|png|ico)$/, loader: 'url-loader?limit=10240&name=[name].[hash].[ext]', },
// 对象形式
{ test: /\.(?:jpg|png|ico)$/, loader: { loader: 'url-loader', options: { limit: 20480, }, }, },
],
现在我们可以非常方便地导入非js文件了:
import logo from './logo.png';
console.log(logo); // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAACLlBMV...ErkJggg==
当然,import语句也可以直接指定loader的,不过如果设置了rules就不能用这种方式:
import logo from 'url-loader?limit=102400!./logo.png';
// 等价于
const logo = require('url-loader?limit=102400!./logo.png').default;
可以这样在vue中使用:
<img :src="require('url-loader?limit=102400!./logo.png').default">
可以看到url-loader经常把文件进行base64编码为URLData(语法:data:[<mediatype>][;base64],<data>
),
这对于小文件非常有用,
但是对于大文件,还是使用file-loader复制到dist:webpack.config.output.path
中比较合适。
url-loader的limit选项就是用来完成这项工作的,直接安装file-loader依赖即可。
贴一段代码,
<template>
<div id="main">
<div id="wrapper">
<img :src=logo alt="vue" id="vue" :class=[classFlash,]>
<img :src="require('./logo.png').default" alt="vue" id="vue" :class=[classFlash,]>
</div>
</div>
</template>
<script>
import logo from './logo.png';
export default {
data() {
return {
title: 'flash',
logo,
classFlash: 'dev-active',
speed: 140,
};
},
mounted() {
const counter = [];
const foo = () => {
this.classFlash =
this.classFlash === '' ? 'dev-active' : '';
if (counter[this.speed] === undefined)
counter[this.speed] = 0;
counter[this.speed] ++ ;
if (counter[this.speed] > (800 / this.speed)) {
if (this.speed > 40)
this.speed -= 10 ;
}
setTimeout(foo, this.speed);
}
foo();
},
};
</script>
<style scoped>
.dev-active {
filter: drop-shadow(2px 2px 8px red);
}
</style>
标签:load 传递 css this time 通过 匹配 除了 export
原文地址:https://www.cnblogs.com/develon/p/12483993.html