Webpack 4图片显示破碎问题求助（自学开发者）

嘿，作为刚接触Webpack时也踩过图片加载大坑的过来人，我来帮你梳理问题出在哪，一步步解决～

核心问题：Webpack处理后的图片路径和你硬写的路径不匹配 #

当你用file-loader/url-loader处理图片时，Webpack会把这些图片复制到输出目录（默认是dist），还会给它们加上哈希值（比如neutral.abc123.jpg），但你代码里还是用./images/neutral.jpg去引用，浏览器自然找不到这个原始路径的文件啦！

第一步：修复Webpack配置的冲突和错误 #

你的配置里有两个明显问题：

1. 同时用file-loader和url-loader处理同类型图片，规则会冲突
2. Babel的正则表达式错误地加了引号，导致规则失效

修改你的dev.js中module.rules部分：

module: {
  rules: [
    // 去掉正则的引号，这是语法错误！
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
    // 合并图片规则，用url-loader统一处理（内置file-loader功能）
    {
      test: /\.(jpeg|png|jpg|gif)$/i, // i忽略大小写，不用重复写JPG
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192, // 小于8kb的图片转base64，大于的输出为文件
            name: '[name].[hash:8].[ext]', // 保留原文件名+8位哈希+后缀
            outputPath: 'images/', // 图片输出到dist/images目录
            publicPath: 'images/' // 页面引用时的路径前缀
          }
        }
      ]
    }
  ]
},

第二步：正确引用图片资源 #

你已经在index.js里import了图片，但没有把它们赋值为变量使用。Webpack会把import的图片解析为打包后的最终路径，所以需要把图片存为变量，再赋值给img的src：

先修改index.js的import部分：

import { checkForUrl } from './js/urlChecker'
import { handleSubmit } from './js/formHandler'
import './styles/resets.scss'
import './styles/base.scss'
import './styles/form.scss'
import './styles/footer.scss'
import './styles/header.scss'

// 把import的图片赋值为变量
import neutralImg from './images/neutral.jpg'
import positiveImg from './images/positive.jpg'
import negativeImg from './images/negative.jpg'

console.log(checkForUrl);
export { checkForUrl, handleSubmit }

然后修改你的图片创建逻辑：

.then(function (res) {
  const imgContainer = document.getElementById('polarityImg');
  // 先清空容器，避免多次提交重复添加图片
  imgContainer.innerHTML = '';
  const img = document.createElement('img');
  
  if(res.polarity === 'neutral') {
    img.src = neutralImg;
  } else if(res.polarity === 'positive'){
    img.src = positiveImg;
  } else if(res.polarity === 'negative'){
    img.src = negativeImg;
  }
  
  imgContainer.appendChild(img);
})

第三步：验证打包结果 #

执行打包命令后，去dist目录下的images文件夹看看，应该能看到带哈希值的图片文件。打开页面后，查看img元素的src，会变成类似images/neutral.abc123.jpg的正确路径，浏览器就能正常加载图片了！

内容的提问来源于stack exchange，提问作者codingSprinkles