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 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>