webpack4踩坑——图片打包

小伙伴们在学习 webpack 的时候有没有这样的经历呢，按照 webpack 官网的教程，一步步构建出自己的脚手架，看到满屏的代码，以及开发环境中花里胡哨的特效，啧啧啧，内心甚至有一丢丢小激动~~~于是乎，切换生产环境、打包、测试…试？？？纳尼，我的图片被狗吃了？？？

今天，我们就来回味一下当时的酸爽——图片打包的坑。

首先，我们来创建一个简单的目录结构，如下所示：

|-- index.html
|-- package.json
|-- webpack.config.js
|-- src
    |-- css
    |   |-- index.css
    |-- images
    |   |-- logo.jpg
    |-- js
        |-- index.js

不考虑多入口，也不考虑其他诸如 ‘fetch’ 等 API 的兼容性，我们只做一些简单的环境区分：

// package.json
"scripts": {
  "dev": "webpack-dev-server --env development --config webpack.config.js",
  "build": "webpack --env production --config webpack.config.js"
},

// webpack.config.js
module.exports = env => {
  return {
    // ...
    module: {
      rules: [
        // 处理 CSS
        {
          test: /\.(c|le|sa|sc)ss$/,
          use: [
			env === 'development'
              ? 'style-loader'
              : MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            }
		  ]
        },
        // 处理图片
        {
          test: /\.(jpg|jpeg|gif|png|svg)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 1024 * 1,
              name: '[name].[hash:8].[ext]',
              outputPath: 'images/'
            }
          }
        }
      ]
    }
  };
};

好了，配置信息差不多了，接下来就该写一点“业务代码”，用以呼应今天的主题：

// index.js
import '../css/index.css';

let createDiv = () => {
  let el_div = document.createElement('div');
  el_div.classList.add('box');
  return el_div;
};
document.body.appendChild(createDiv());

let icon = new Image();
icon.src = Icon;
document.body.appendChild(icon);

/* index.css */
.box {
  width: 200px;
  height: 200px;
  background: url(../images/logo.jpg) no-repeat;
}

大功告成，于是我们迫不及待地启动开发环境。。。结果。。。还是挺令人满意的。
再于是乎，我们边切换到生产模式打包，边内心 OS：谁说的打包图片是个坑的，站出来，我保证不打死你！打包完成后，顺手就本地跑了起来，然后我们就有了素质三连，看着下图的报错，经典国骂掠过心头外加黑人问号脸。

可是，问题已经产生，作为高贵的程序猿，解决出问题的人或物才是我们的本能，自我了结是不可能的，这辈子都不可能！心平气和下来再看看错误信息，咦，这诡异的路径是怎么回事？图片怎么跑到了 CSS 目录下？

通过一系列的度娘和谷歌，我们终于找到了原因所在。

webpack 在打包时，首先会把图片复制到 /dist/images/ 文件夹下，然后把 css 文件中的 url 路径替换为 webpack 中 options 的 name 属性指向的路径，即 /images/logo.jpg, 但是这个路径是相对路径，是相对于 /dist/css/~.css 来说的， 所以此处引用的 文件地址为： /dist/css/images/logo.jpg。 但是我们打包后的 css 文件夹中， 并没有 images/logo.png, 所以图片并没有渲染出来。

哦~，原来就是 webpack 打包时，相对路径和绝对路径傻傻分不清楚，主要体现在生产环境下分离 CSS 代码时路径出错了，解决掉不就 OK 了！说干就干，效率至上！

// webpack.config.js
env === 'development'
  ? 'style-loader'
  : {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../'
    }
  +},

在为 CSS 文件配置 loader 时，添加 publicPath 属性。这样做，我们在图片打包时，仍会将图片复制在 /dist/images/ 文件夹之下，但是在 CSS 文件中引用时，会将路径替换为 publicPath + name。

至此，再次打包，测试，完美！以防万一，开发环境下也跑一遍，beautiful~~

参考

webpack:url-loader 图片路径问题