webpack的Url-loader引入图片，因相对路径而导致的问题

Question

url-loader会把所有import进来的图片的路径一律替换成name参数的值。

比如参数如：'&name=images/[name].[ext]'时，任何图片都会被替换成./images/[name].[ext]式的相对路径。

**但是CSS里相对路径是相对于CSS文件，而JS文件相对路径是相对于index.html。
导致引入同样的图片，在CSS和JS中指向了不同的目录。**

其中一个会加载失败。

请问如何解决。

Answer 1

解决这个问题需要配置好publicPath属性。
file-loader在编译import进来的图片的路径时会添加上publicpath的值。
设置一个全局的publicPath，并在css-loader中设置自己的publicpath覆盖全局值。
这样就好了。

Answer 2

webpack 官方文档

webpack 中文文档

图片是使用 file-loader 处理的。

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };