Webpack 4与sass-加载程序和解析-url-加载程序-图像路径未被找到

Question

这里的最低可重现性设置：https://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue

我试图使用resolve-url-loader在我的scss url()图像路径中添加一个hashname，但是我花了很长时间才能让它与webpack 4一起工作。我在/static/img/**中有一堆图片在我的SCSS中引用如下：

span.arrow {
  background: url(/static/img/audiences.png);
}

它在我的css中以完全相同的方式结束(解析-url-加载器找不到它们)

当我通过webpack运行下面的配置时，我看到解析加载程序正在找到正确的url()及其路径，但是调试模式说找不到。

resolve-url-loader: /static/img/audiences.png
  /Users/usr1/webpack_playground/src
  /Users/usr1/webpack_playground/static/img
  NOT FOUND

是否有不正确的输出配置？我尝试过各种设置组合，但都没有效果：

  loader: 'resolve-url-loader',
  options: {
    debug: true,
    root: path.join(__dirname, './static/img'),
    includeRoot: true,
    absolute: true,
  },

我的最终目标是让文件加载器将它们转换为/dist哈希版本：

span.arrow {
  background: url(/static/img/audiences-dhsye47djs82kdhe6.png);
}

// Webpack规则配置

rules: [
      {
        test: /\.(png|jpg|gif)$/,
        include: [
          path.resolve(__dirname, './static/img'),
        ],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      {
        test: /\.svg$/,
        use: {
          loader: 'svg-inline-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      { test: /\/src\/js\/(?:.*)\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
      {
        test: [/\.scss$/, /\.sass$/],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              debug: true,
              root: './static/img',
              includeRoot: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'compressed',
              sourceMap: true,
              includePaths: [
                './src'
              ],
            },
          },
        ],
      },
]

Answer 1

结果我只需要file-loader来做我想做的事。

当任何css/ sass /样式加载器遇到一个图像(与我指定的文件扩展名匹配)时，它将通过file-loader处理，后者将其复制到指定的命名格式指定的输出目录中，并返回sass加载程序用作文件名的名称。

rules: [
  {
    test: /\.(png|jpg|gif|svg)$/,
    exclude: [
      path.resolve(__dirname, './node_modules'),
    ],
    use: {
      loader: 'file-loader',
      options: {
        name: '[path][name]-[hash].[ext]',
        outputPath: '../',
        publicPath: '/dist',
      },
    },
  },
  {
    test: /\.svg$/,
    include: [
      path.resolve(__dirname, './node_modules'),
    ],
    use: {
      loader: 'svg-inline-loader',
      options: {
        name: '[name]-[hash].[ext]',
      },
    },
  },
  { test: /\/src\/js\/(?:.*)\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
  {
    test: [/\.scss$/, /\.sass$/],
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          root: path.resolve(__dirname),
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            autoprefixer({
              'browsers': ['last 2 versions', 'ie >= 10'],
            }),
          ],
          sourceMap: true,
        },
      },
      {
        loader: 'sass-loader',
        options: {
          outputStyle: 'compressed',
          sourceMap: true,
          includePaths: [
            './src/scss',
          ],
        },
      },
    ],
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: {
          root: path.resolve(__dirname),
        },
      },
    ],
  },
  {
    test: [
      /\/bundles\/(?:.*)\.js$/,
    ],
    use: {
      loader: 'babel-loader',
    },
  },
];

Answer 2

实际上，有时候仍然需要解析-url加载器.这取决于您是否希望能够解析sass编译中导入的文件中的url()调用。如果没有它，urls就会在这种情况下被破坏。

但是，如果您不使用多文件scss构建(例如，如果每个组件只有一个scss文件本地，而不调用共享库、scss代码或某种类型的部分)，那么您就不需要解析-url-加载器。

当然，您仍然需要url-加载器(带有内联功能的包装文件-loder)或文件加载器(用于将资产直接复制到dist文件夹)。

解决-url-加载程序通过重新处理sass发出的原始文件来工作，而sass加载程序在使用dart sass实现时确实存在源代码映射的问题。在本例中，源代码映射源将错误地被stdin替换为文件名，请参阅第671期和PR 681中的修复程序。

从今天(2019年7月)起，这仍然是未发布的修补程序，唯一的选择是使用节点sass或使用未发布的sass加载程序。

Answer 3

我也有过同样的问题。我相信你需要 url-loader会正确地加载Webpack 4的图片。这个设置对我是有效的：

rules: [
    {
        test: /\.(png|jpg)$/,
        loader: "url-loader",
    }, {        
        test: /\.(scss|css)$/,
        use: [
            "style-loader",
            "css-loader",
            "sass-loader",
        ]
    }
]