-
-
Notifications
You must be signed in to change notification settings - Fork 389
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to override webpack.output.publicPath
#44
Comments
@fpsqdb can you describe use case? |
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 |
I have the same problem, about when
however, want't to be:
How to config this? webpack.config.js:
|
@itstrive, Same issue! In webpack v3 we written something like this:
In webpack 4 we don't have to pass publicPath: '../', in config, and Any help? |
+1 on this, i have the same issue |
Use |
@evilebottnawi same issue here. I'm using it like so:
But I'm not seeing publicPath being attached to the query object. I.e.
..is logging as an empty object. When I log the loader itself ( Thanks in advance! |
@troygibb looks like feature, PR welcome 👍 |
@evilebottnawi nice!! I'll try to get around to it in the next few weeks. |
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}, {
loader: 'css-loader'
}]
} looks like working for me |
To make it work:
|
@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 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. |
Setting publicPath as @victordidenko mentioned worked for me as well |
+10086 on this, IIIIIIII have the same issue,too! |
Somebody can create minimum reproducible test repo? |
@evilebottnawi |
Hm what is problem, your want rewrite all assets in css using |
That is exactly what my comment about. Do you follow conversation? |
@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! |
Also rewrite absolute URLs to relative inside your css should be done by css minificator. |
I think it should be documented though. In readme there is nothing about possible options for loader. |
@victordidenko yep, you are right |
I can't seem to get this to rewrite the urls correctly in webpack 4 anymore. in my config I have:
I want the urls in my scss to be changed to 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. |
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 |
@ClaytonHunt 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? |
Please don't spam here, use |
@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. |
@ClaytonHunt not for you, just notice about posts like "I have some problem" (without configuration or minimum reproducible test repo) |
@evilebottnawi I am sorry, I repeat the editor is afraid I am not fully expressed, I will pay attention next time. |
@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? |
@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? |
webpack.output.publicPath
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.
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.
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.
+2 on this, i have the same issue |
exports.cssLoaders = function(options) { const cssLoader = { const postcssLoader = { const MiniCssExtractPluginLoader = { // generate loader string to be used with extract text plugin
} |
Using use: [
cssHotLoad,
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: process.env.NODE_ENV === 'development',
url: false,
context: '../../',
}
},
] |
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'
})
] |
Here good answer #44 (comment), we will simplify this for webpack@5 |
hopefully @evilebottnawi |
this is mini-css-extract-plugin config:
but extract-text-webpack-plugin works as expect:
The text was updated successfully, but these errors were encountered: