Webpack不能重写资产网址(手写笔)

Question

我试图将我的资产路径从某个路径(~assets/myimage.png)重写到正确的目录(在我的例子中/assets/).

我告诉我的webpack将所有图像写入公共文件夹中.图像被正确写入,但构建css中的url没有相应调整.

这是我用于手写笔文件的规则

use: ExtractTextPlugin.extract({
  fallback: {
    loader: require.resolve("style-loader"),
    options: {
      hmr: false
    }
  },
  use: [
    {
      loader: require.resolve("css-loader")
    },
    {
      loader: require.resolve("stylus-loader")
    }
  ]
})

以及我用于资产的那个

{
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve("url-loader"),
    options: {
      limit: 100,
      name: "static/media/[name].[hash:8].[ext]"
    }
},

我的别名解析为正确的目录:

assets: path.resolve(__dirname, "../public")

并将公共路径设置为 /assets/

publicPath: publicPath + "assets/",

由于我使用ExtractTextPlugin,因此无法使用样式加载器.当使用样式加载器时它只能工作,但在我的用例中我需要一个css文件/style.css

有什么想法吗？

Answer 1

用于file-loader图像。

test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]