Version

"url-loader": "^3.0.0", "vue-loader": "^15.7.2",

Steps to reproduce

在搭建的vue項目中：

img src="./assets/jinnang.png" become img src="[object Module]"

What is expected?

src="base64 image"

What is actually happening?

src="[object Module]"

Img tag in template will be compiled into: {attrs:{"src":webpack_require(/*! ./assets/jinnang.png */ "./src/assets/jinnang.png"),"alt":""}}

The reult of webpack_require(....) is Object Module ,so it go wrong. Is it right?

Url in css will be compiled into getUrl(webpack_require(/*! ./assets/jinnang.png */ "./src/assets/jinnang.png"),that go well.

image

image

Workaround: set the esModule option in url-loader to false.

It's because in @vue/component-compiler-utils we transformed the asset urls to require statements, which expect CommonJS modules, while the recent major release of url-loader emits ES modules by default.

issue: https://github.com/vuejs/vue-loader/issues/1612#thread-subscription-status

Vue-loader中的 transformAssetUrls 選項：

在模板編譯過程中，編譯器可以將某些特性轉(zhuǎn)換為 require 調(diào)用，例如 src 中的 URL。因此這些目標資源可以被 webpack 處理。例如 <img src="./foo.png"> 會找到你文件系統(tǒng)中的 ./foo.png 并將其作為一個依賴包含在你的包里。

image

使用 file-loader 時也會出現(xiàn)上述同樣情況，file-loader 提供了一個esModule 選項，Type: Boolean Default: true

By default, file-loader generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.
You can enable a CommonJS module syntax using:
webpack.config.js
module.exports = {
module: {
rules: [ {
test: /.css$/,
use: [ {
loader: 'url-loader',
options: { esModule: false, },
}, ],
}, ],
},
};