javascript - Webpack - 生产如何为 <link href =""> 和 css 文件中的图像路径启用不同的文件路径

Question

我会更详细地解释。

    module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist/'),
    assetsSubDirectory: 'assets',
    assetsPublicPath: './',
    productionSourceMap: true,
  }
}

以上是我的 webpack 构建的配置设置。这适用于将 CSS 文件等 Assets 嵌入我的 index.html 文件所需的路径。如以下代码所示:-

<link href=./assets/css/app.345e4523874bd70b2f24b4356d30ed9e.css rel=stylesheet>

但是当查看 app.345e4523874bd70b2f24b4356d30ed9e.css 时，webpack 当然已经构建了图像和字体的所有路径，如下所示:-

./assets/img/home-bg.jpg

问题是我需要将所有与 CSS 相关的资源路径更改为 ../img 或 ../fonts。

我已经尝试了很多东西并在网上查找但似乎无法找到解决方案!？一定很简单。

这是我的文件夹结构。谢谢

CSS 图片 js index.html

Answer 1

刚刚通过添加 'publicPath '../' 到

解决了这个问题

{
    test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]'),
      publicPath: '../'
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
      publicPath: '../'
    }

希望这对其他人有帮助