通用的基础配置略过不提，假定已经配置好了webpack-dev-server,剩下的就是在配置Vue相关的内容时，出现的一些报错。

图片不显示，路径为[object Module]的问题

现象

正常配置好Vue页面，页面也能够显示，但是图片显示不出来，查看元素，img标签的src有点异常。

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

可以看到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根本没提这个字段，仅在英文文档里有相关说明。

从零配置Vue开发webpack环境踩到的坑