使用Webpack打包bxslider时无法找到Npm包中的图片

我之前在项目里用bxslider的时候也踩过这个坑！问题出在Webpack解析CSS里的图片路径时，默认是相对于当前处理的CSS文件所在目录，但bxslider自带的样式里的图片路径是指向它自己包内的images文件夹，咱们直接引入的话Webpack就找不到了。下面给你几个靠谱的解决办法：

方法1：配置file-loader的上下文与路径 #

首先确保你已经装了file-loader（用来处理图片资源）：

npm install file-loader --save-dev

然后在你的Webpack配置文件（比如webpack.config.js）里，修改处理图片的规则，加上context指定bxslider的资源目录：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      // 处理SCSS的规则（确保你已经配置了style-loader、css-loader、sass-loader）
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      // 处理图片资源的关键配置
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/', // 打包后图片放到dist/images里
              publicPath: './images/', // CSS里引用图片的路径前缀
              context: 'node_modules/bxslider/dist/' // 告诉Webpack去bxslider的dist目录找图片
            }
          }
        ]
      }
    ]
  }
};

context这个配置是核心，它让Webpack知道这些图片资源的基准目录是bxslider的dist文件夹，这样就能正确解析./images/bx_loader.gif这类路径了。

方法2：用Webpack的特殊语法引入bxslider CSS #

不想改配置的话，直接在你的SCSS文件里用~符号引入bxslider的CSS，这个符号是Webpack的专属语法，会自动去node_modules目录找对应的文件：

// 替换你原来的import语句
@import '~bxslider/dist/jquery.bxslider.css';

这样Webpack会直接从bxslider的包目录里读取CSS文件，自然就能找到它自带的图片资源了，省心又省事！

方法3：手动复制图片（不推荐） #

如果上面两种方法都不想试，你可以把node_modules/bxslider/dist/images里的所有图片，复制到你项目里SCSS文件引用的./images目录下。不过这种方法太麻烦，每次更新bxslider都要重新复制，只适合临时测试用。

最后再检查下你的css-loader配置，默认它是开启url: true的，也就是会自动解析CSS里的url()引用，如果你手动改过这个配置，记得要把它设为true，不然Webpack会忽略CSS里的图片路径。

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