How to override `webpack.output.publicPath` #44

fpsqdb · 2018-03-19T08:31:47Z

this is mini-css-extract-plugin config:

 plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            publicPath: "../../../"
        })
    ]

but extract-text-webpack-plugin works as expect:

                use: extractStyle.extract({
                    fallback: "style-loader",
                    use: [cssLoader],
                    publicPath: '../../../'
                })

The text was updated successfully, but these errors were encountered:

alexander-akait · 2018-03-20T12:40:02Z

@fpsqdb can you describe use case?

michael-ciniawsky · 2018-03-20T13:07:24Z

Yep, please provide a use case as this feature was one of the more 'problematic' ones of ETWP and we should very carefully consider all possible ways to solve this else wise (if possible) before adding options.publicPath back to this plugin

itstrive · 2018-03-23T02:58:39Z

I have the same problem, about background-image,
use url-loader limitoptions, when less than.

when npm run buld, it's result like this:

body{
    background:url(images/bdc52c4172ae217d3d74698729d4e935.jpg) no-repeat;
}

however, want't to be:

body{
    background:url(../images/bdc52c4172ae217d3d74698729d4e935.jpg) no-repeat;
}

How to config this?

webpack.config.js:

   module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:50,  //it's important
                        outputPath:'images'
                    }
                }]
            }
        ]
    }

    ,plugins:[
        new MiniCssExtractPlugin({
            filename:'css/index.css' //it's important
        })
    ]

7iomka · 2018-03-23T21:16:15Z

@itstrive, Same issue!
My old sass config for webpack 3x: https://codepen.io/7iomka/pen/pLrbQM?editors=0010
My sass config modified for webpack 4: https://codepen.io/7iomka/pen/EEvyRK?editors=0010
want't to be:
from DEV in sass file I write:
background: url('../../assets/img/catalog/dcp-l5500dn/dcp-l5500dn-sm.jpg');

In webpack v3 we written something like this:

use: ExtractTextPlugin.extract({
                       publicPath: '../',
                       fallback: 'style-loader',
                       use: ...

In webpack 4 we don't have to pass publicPath: '../', in config, and
Expected result:
background: url(img/dcp-l5500dn-sm.jpg);
But real result is:
background: url(/img/dcp-l5500dn-sm.jpg);

Any help?
Thanks!

acambas · 2018-03-26T09:59:14Z

+1 on this, i have the same issue

alexander-akait · 2018-03-26T18:19:22Z

Use publicPath option for loader, look here https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/loader.js#L33. Feel free to ping me if it is not help

troygibb · 2018-03-30T16:35:15Z

@evilebottnawi same issue here. I'm using it like so:

plugins: [
  ...
  new MiniCssExtractPlugin({
    filename: '[name]-[contenthash].css',
    publicPath: './',
  }),
]

But I'm not seeing publicPath being attached to the query object. I.e.

const query = loaderUtils.getOptions(this) || {};

..is logging as an empty object. When I log the loader itself (MiniCssExtractPlugin.loader), it's just a relative path to the loader.js file, so I'm unclear on how to add the option there.

Thanks in advance!

alexander-akait · 2018-03-30T16:45:49Z

@troygibb looks like feature, PR welcome 👍

troygibb · 2018-04-02T18:49:47Z

@evilebottnawi nice!! I'll try to get around to it in the next few weeks.

victordidenko · 2018-04-05T20:04:27Z

{
  test: /\.css$/,
  use: [{
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../'
    }
  }, {
    loader: 'css-loader'
  }]
}

looks like working for me

wadouk · 2018-04-06T12:54:57Z

To make it work:

use a publicPath in devserver
use a relative path on the plugin entry (not loader)
use a relative path in filename in output

victordidenko · 2018-04-06T13:07:12Z

@wadouk I think you don't understand an issue.

If you use plugin like

new MiniCssExtractPlugin({
  filename:'css/index.css' //it's important
})

then all resources inside CSS file (like background images, fonts) become with wrong urls, they need to be prepended with "../", because your css file inside folder css/.

This is not publicPath on devserver, which completely different thing, and publicPath on plugin entry is not working, as reported by @troygibb . And you don't specify css files and resources as output entry, so you are wrong here too.

kenjiqq · 2018-04-10T14:26:42Z

Setting publicPath as @victordidenko mentioned worked for me as well

yisar · 2018-05-03T07:14:16Z

+10086 on this, IIIIIIII have the same issue,too!

alexander-akait · 2018-05-03T09:08:36Z

Somebody can create minimum reproducible test repo?

victordidenko · 2018-05-03T10:01:43Z

@evilebottnawi publicPath option for loader works as expected, as you said. See my comment above.

alexander-akait · 2018-05-03T10:06:16Z

Hm what is problem, your want rewrite all assets in css using publicPath? It is impossible you should configure publishPath options for loader

victordidenko · 2018-05-03T10:16:57Z

That is exactly what my comment about. Do you follow conversation?

alexander-akait · 2018-05-03T10:50:21Z

@victordidenko oh sorry, i look you post on email (very hard to read 😄 ). Yep close this issue because it should be set using loader. Thanks!

alexander-akait · 2018-05-03T10:53:23Z

Also rewrite absolute URLs to relative inside your css should be done by css minificator.

victordidenko · 2018-05-03T10:54:23Z

I think it should be documented though. In readme there is nothing about possible options for loader.

alexander-akait · 2018-05-03T10:58:08Z

@victordidenko yep, you are right

ClaytonHunt · 2018-06-05T21:20:32Z

I can't seem to get this to rewrite the urls correctly in webpack 4 anymore. in my config I have:

Plugins
------------
new MiniCssExtractPlugin({
  filename: "styles/[name].css"
})
...
Module Rules
----------------
{
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|otf|ico|mp4)(\?\S*)?$/,
      use: {
        loader: 'file-loader',
        options: {
          outputPath: 'assets/',
          publicPath: '/',
          name: '[name].[ext]'
        }
      },
    }
...
{
      test: /\.(css|scss)$/,
      exclude: [helpers.projectRoot('node_modules')],
      include: [helpers.projectRoot('src/styles')],
      use: [{
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '../assets'
        }
      }, {
        loader: 'css-loader'
      }, {
        loader: 'sass-loader'
      }]
    }

I want the urls in my scss to be changed to url(/assets/barlow-v1-latin-regular.woff) but everything is unchanged and from website root url('./web-theme/fonts/Barlow/barlow-v1-latin-regular.woff') is turning into http://lvh.me:3000/web-theme/fonts/Barlow/barlow-v1-latin-regular.woff

The actual assets are at the correct location, they just aren't loading because the url has the wrong path.

Any help would be greatly appreciated. I have tried several permutations of the suggested publicPath option for the loader but nothing seems to have any effect.

ClaytonHunt · 2018-06-10T10:24:43Z

For anyone who is having the same problem I was with a configuration similar to mine. Before, with Webpack 3, ExtractTextPlugin seemed to be updating the path for my assets. After, with Webpack 4, MiniCssExtractPlugin was not. The solution was to change the "publicPath" of the "file-loader" to point to my assets folder. I actually removed "publicPath" from the MiniCssExtractPlugin "options". Hope this can help someone else.

xiaofan9 · 2018-06-19T06:11:57Z

@ClaytonHunt
你的意思是，file-loader -> publicPath，MiniCssExtractPlugin -> publicPath 这两者参数多要设置？还是只需要设置file-loader 上设定publicPath的参数？
我目前只是修改了MiniCssExtractPlugin -> publicPath 这个参数，背景图引入路径已经被纠正！

You mean, file-loader.publicPath, MiniCssExtractPlugin.publicPath, both of which need to be set up. Or do you just need to set the publicPath parameter on the file-loader?
I currently only modify the MiniCssExtractPlugin.publicPath parameter, the background image introduction path has been corrected!

alexander-akait · 2018-06-19T09:50:34Z

Please don't spam here, use publichPath option for mini-css-extract-plugin loader, if it is not help double check you publichPath on other loader, thanks!

ClaytonHunt · 2018-06-19T10:25:03Z

@xiaofan9 I only needed publicPath on file-loader.

@evilebottnawi I apologize if you think we are spamming, the fact is that the suggested fixes in this thread don't seem to fix the problem. I was originally presenting my config and asking for help. Once I got something working I thought it would be helpful to share what worked for me. I dealt with this issue for more than a day before I posted asking for help and then figured it out after 5 more days of tinkering. I wanted to save others the time I wasted.

alexander-akait · 2018-06-19T10:28:43Z

@ClaytonHunt not for you, just notice about posts like "I have some problem" (without configuration or minimum reproducible test repo)

xiaofan9 · 2018-06-19T14:42:31Z

@evilebottnawi I am sorry, I repeat the editor is afraid I am not fully expressed, I will pay attention next time.

xiaofan9 · 2018-06-19T14:46:43Z

@ClaytonHunt Using only publicPath on file-loader, I don't know if you will encounter the problem that the src in img can't find the path?

NithishReddy · 2018-06-26T13:26:26Z

@evilebottnawi Hi i am using react-loadable for lazy loading js files and MiniCssExtractPlugin for lazyloading css files. now i want to load js and css files from different domains. how can achieve this problem?

This is an ongoing issue being discueed in webpack-contrib/mini-css-extract-plugin#44 Overriding localPath as suggested in webpack-contrib/mini-css-extract-plugin#44 (comment) is a quick fix, but hardly seems right.

tomatobybike · 2018-12-29T15:31:04Z

+1 on this, i have the same issue

+2 on this, i have the same issue

tomatobybike · 2019-01-08T23:31:24Z

exports.cssLoaders = function(options) {
options = options || {}

const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}

const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}

const MiniCssExtractPluginLoader = {
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../../'
}
}

// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = []

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  loaders.push(MiniCssExtractPluginLoader)
} else {
  loaders.push('vue-style-loader')
}

loaders.push(cssLoader)

if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

if (loader) {
  loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap
    })
  })
}
return loaders

}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', {
indentedSyntax: true
}),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}

madsem · 2019-03-07T08:56:07Z

Using publicPath on loader didn't do anything for me, what solved it was to use context on the css-loader directly.

use: [
    cssHotLoad,
    MiniCssExtractPlugin.loader,
    {
        loader: 'css-loader',
        options: {
            importLoaders: 2,
            sourceMap: process.env.NODE_ENV === 'development',
            url: false,
            context: '../../',
        }
    },
]

rbrisita · 2019-05-31T05:27:55Z

I ended up with this configuration to get the output files to go where needed.

webpack.common.js:

    output: {
        path: helpers.root('public'),
        publicPath: '',
    },

webpack.prod.js:

    output: {
        filename: 'js/[hash].js',
        chunkFilename: 'js/[id].[hash].chunk.js'
    },
...
    plugins: [
        new MiniCSSExtractPlugin({
            filename: 'css/app.[hash].css'
        })
    ]

alexander-akait · 2019-12-25T16:54:51Z

Here good answer #44 (comment), we will simplify this for webpack@5

aaarichter · 2020-08-25T19:12:02Z

hopefully @evilebottnawi

alexander-akait added the type: feature label Mar 30, 2018

alexander-akait closed this as completed May 3, 2018

alexander-akait reopened this May 3, 2018

alexander-akait added type: docs and removed type: feature labels May 3, 2018

alexander-akait changed the title ~~How to override webpack.output.publicPath~~ [docs]: how to override webpack.output.publicPath May 3, 2018

alexander-akait added help wanted good first issue labels May 3, 2018

alexander-akait mentioned this issue Jun 15, 2018

the path of img is wrong in css file . Does the mini-css-extract-plugin support ‘publicPath’? #182

Closed

michael-ciniawsky changed the title ~~[docs]: how to override webpack.output.publicPath~~ How to override webpack.output.publicPath Aug 24, 2018

michael-ciniawsky added priority: 3 (important) severity: 5 (confusing) and removed semver: patch labels Aug 24, 2018

andreyvolokitin mentioned this issue Oct 9, 2018

Same publicPath when loading images from css and html files webpack-contrib/file-loader#272

Closed

siakaramalegos mentioned this issue Oct 12, 2018

Set specific path for file-loader to look for assets webpack-contrib/file-loader#180

Closed

veej mentioned this issue Jan 15, 2019

[webpack] the build is not resolving the relative urls in scss correctly buildo/scriptoni#256

Open

karlvr mentioned this issue Mar 27, 2019

URLs in CSS should be relative to the CSS file, but can't achieve with publicPath #367

Closed

alexander-akait closed this as completed Dec 25, 2019

Sayan751 mentioned this issue Sep 18, 2020

fix(webpack) correct MiniCssExtractPlugin fix: #18 aurelia/v1#19

Merged

niklasnatter mentioned this issue Sep 14, 2021

Remove separate webpack configuration in react-styleguidist configuration sulu/sulu#6225

Merged

How to override webpack.output.publicPath #44

How to override webpack.output.publicPath #44

Comments

fpsqdb commented Mar 19, 2018

alexander-akait commented Mar 20, 2018

michael-ciniawsky commented Mar 20, 2018

itstrive commented Mar 23, 2018 • edited Loading

7iomka commented Mar 23, 2018 • edited Loading

acambas commented Mar 26, 2018

alexander-akait commented Mar 26, 2018

troygibb commented Mar 30, 2018

alexander-akait commented Mar 30, 2018

troygibb commented Apr 2, 2018

victordidenko commented Apr 5, 2018

wadouk commented Apr 6, 2018

victordidenko commented Apr 6, 2018 • edited Loading

kenjiqq commented Apr 10, 2018

yisar commented May 3, 2018

alexander-akait commented May 3, 2018

victordidenko commented May 3, 2018

alexander-akait commented May 3, 2018

victordidenko commented May 3, 2018

alexander-akait commented May 3, 2018

alexander-akait commented May 3, 2018

victordidenko commented May 3, 2018

alexander-akait commented May 3, 2018

ClaytonHunt commented Jun 5, 2018 • edited Loading

ClaytonHunt commented Jun 10, 2018

xiaofan9 commented Jun 19, 2018 • edited Loading

alexander-akait commented Jun 19, 2018

ClaytonHunt commented Jun 19, 2018

alexander-akait commented Jun 19, 2018 • edited Loading

xiaofan9 commented Jun 19, 2018

xiaofan9 commented Jun 19, 2018

NithishReddy commented Jun 26, 2018

tomatobybike commented Dec 29, 2018

tomatobybike commented Jan 8, 2019 • edited Loading

madsem commented Mar 7, 2019

rbrisita commented May 31, 2019

alexander-akait commented Dec 25, 2019

aaarichter commented Aug 25, 2020

How to override `webpack.output.publicPath` #44

How to override `webpack.output.publicPath` #44

itstrive commented Mar 23, 2018 •

edited

Loading

7iomka commented Mar 23, 2018 •

edited

Loading

victordidenko commented Apr 6, 2018 •

edited

Loading

ClaytonHunt commented Jun 5, 2018 •

edited

Loading

xiaofan9 commented Jun 19, 2018 •

edited

Loading

alexander-akait commented Jun 19, 2018 •

edited

Loading

tomatobybike commented Jan 8, 2019 •

edited

Loading