Vue开发环境遇坑：解决webpack 4.0图片消失问题

哈喽，各位！我这用Vue开发环境和webpack 4.0整东西时候遇到点儿困难，你们有过这种事不？

...
module: {
 rules: [
 ...
 {
  test: /.(jpe?g|png|gif|svg)$/i,
  use: [
  {
   loader: 'url-loader',
   options: {
   limit: 10000,
   name: '[name].[ext]',
   outputPath: 'imgs/'
   }
  }
  ]
 },
 ...
 ]
}
...

我装完图片后查看网页，发现图片不见了，找不到问题所在！

现在懂了，就是File Loader升级后改用了ES Module模式，要解决的话有两种方法：要么给图片路径加上.default，要么在Webpack里把File Loader的esModule选项关闭。哪种更简便，你自己看着办！

搞懂！得选2号方案！然后我就微调了webpack设置，重建了下。不错喔，竟然真搞定！超兴奋呐！

兄弟，有这事儿？你试试去webpack的file-loader那儿，把esModule关了就行。这样图片就能出来，不然看起来就像搞迷糊！

瞧见没?我这儿分享的东西能教你学会新玩意儿哦!顺手给我点赞分享一波呗~

搞定喽！小心webpack的配置问题别被小难关绊住脚。有啥疑惑？直接留言问问我们就行，肯定给你详细解释。刚才咱们聊了些关于webpack和file-loader的难题，确实费劲，但只要找出答案心里也就踏实了！希望大家不管是学知识还是过日子，都能勇于挑战新鲜事儿，让自己越来越强。别忘给我们点个赞，说两句好听话，分享给朋友们！

{
 test: /.(jpe?g|png|gif|svg)$/i,
 use: [
 {
  loader: 'file-loader',
  options: {
  esModule: false
  }
 }
 ]
}