快評：修復 Module parse failed: Unexpected token ''

問題很簡單。這是 Vue 2.6：

<template>
    <img v-bind:src="require(`${src}`)" />
</template>

<script>
export default {
    computed: {
        bar() { return Math.random() > 0.5; },
        src() { return `/foo/${this.bar ? "bar" : "baz"}.png`; };
    }
};
</script>

這麼寫，然後 webpack 就報警告：

Module parse failed: Unexpected token ''
File was processed with these loaders:
 * (paths)
You may need an additional loader to handle the result of these loaders.

答案看似困難，但其實解法出乎意料的簡單：因為 webpack loader 不知道該如何處理這種被變數化的檔案：它該用 svg loader, ico loader, 還是 png loader 呢？
所以只要標明處理檔案的副檔名就可以了：

<template>
    <img v-bind:src="require(`${src}.png`)" />
</template>

<script>
export default {
    computed: {
        bar() { return Math.random() > 0.5; },
        src() { return `/foo/${this.bar ? "bar" : "baz"}`; };
    }
};
</script>

這樣 webpack loader 就知道該用 png loader 處理你的檔案。

所以有兩件事：

1. require() 函式一定要用 String 包起來，這樣 webpack 才知道型別為 String 並處理之。
2. 如果 webpack loader 裝不了或無法改 webpack 設定的話，建議在後面 require() 函式加上副檔名。

報告完畢。