Webpack-Production您如何启用不同的文件路径 <link href=“”> 和css文件中的图像路径

Question

I will explain in more detail.

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

Above is my config setup for my webpack build. This works fine for the paths required for embedding assets such as CSS files into my index.html file. As seen in the below code:-

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

But when looking at app.345e4523874bd70b2f24b4356d30ed9e.css of course webpack has built all the paths for images and fonts to be constructed like as follows:-

./assets/img/home-bg.jpg

Problem is I need to change all CSS related asset paths to ../img or ../fonts.

I have tried so many things and looked online but can't seem to find a solution!? It must be so simple.

Here is my folder structure. Thanks

css img js index.html

Answer 1

just solved this by adding 'publicPath '../' to

{
    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: '../'
    }

Hope this helps someone else