通用的基礎配置略過不提，假定已經配置好了webpack-dev-server,剩下的就是在配置Vue相關的內容時，出現的一些報錯。

圖片不顯示，路徑為[object Module]的問題

現象

正常配置好Vue頁面，頁面也能夠顯示，但是圖片顯示不出來，檢視元素，img標籤的src有點異常。

<img data-v-47323bf2="" src="[object Module]" alt="">

可以看到src欄位不是一個地址，而是一個物件，所以顯示不出來。

原因

檢視vue-loader的文件，可以在處理資源路徑這一章看到，vue-loader會將所有遇到的資源 URL 轉換為 webpack 模組請求。
例如，下面的模板程式碼片段：

<img src="../image.png">

將會被編譯成為：

createElement('img', {
  attrs: {
    src: require('../image.png') // 現在這是一個模組的請求了
  }
})

可以看到Vue生成的是CommonJS模組語法，即require('../image.png')；但file-loader預設採用ES模組語法，即import '../image.png'；二者不一致。所以在圖片引用的時候就變成了src="[object Module]"。

解決

需要讓file-loader或url-loader採用CommonJS語法。剛好file-loader或url-loader有一個esModule選項能調整，將其設定為false即可：

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
            limit: 10000,
            name: 'static/img/[name].[hash:7].[ext]',
            esModule: false
        }
}

值得一提的是現在webpack中文文件裡，url-loader根本沒提這個欄位，僅在英文文件裡有相關說明。