Webpack 模块加载器Loader 配置文件和import语法 url-loader file-loader

webpack中一切都是模块，除了.js文件，所有模块都需要相应的loader进行打包导出为js对象才能使用。

通过向数组webpack.config.module.rulespush如下规则对象，就可以通过文件名设置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

当然，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">

在import语句中指定多个Loader

可以在import语句中指定多个Loader:

import css from 'style-loader!css-loader?modules!./style.css';

在import语句中跳过Webpack配置文件规则

如果已经在Webpack配置文件中指定了对应文件的模块规则, 那么可以通过在字符串开头添加一个及以上的感叹号来绕过规则, 如!、!!、!!!:

import from '!!style-loader!css-loader!./style.css'; // 不再执行webpack.config.js规则

url-loader 与 file-loader 的关系

可以看到url-loader经常把文件进行base64编码为URLData(语法：data:[<mediatype>][;base64],<data>)，

这对于小文件非常有用，

但是对于大文件，还是使用file-loader复制到dist:webpack.config.output.path中比较合适。

url-loader的limit选项就是用来完成这项工作的，直接安装file-loader依赖即可。

贴一段代码，

<template>
<div >
    <div >
        <img :src=logo alt="vue"  :class=[classFlash,]>
        <img :src="require('./logo.png').default" alt="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>