Comments (15)
The only supported way is through Webpack output.publicPath
.
from webpack-isomorphic-tools.
do you have any suggestions how to work with docker and cdn with multiple envs? since CDN will be used only for production, so that means that we need to create docker image with and without cdn if there's no any other way..
from webpack-isomorphic-tools.
I didn't work with Docker so I'm not an expert on it.
Dunno.
from webpack-isomorphic-tools.
@idangozlan I'm facing the same issue. What I ended up doing is, I created a file with the setting of __webpack_publich_path__
and then included that on my entry point config on webpack.config.js. Similar to this: webpack/webpack#2776 (comment)
That takes care of the client. For the server, I had to look for an env variable I use for overwritting the cdn path and doing a replace on the assets paths. I tried adding the same script from above to the server side entry point with no luck. Where you able to solve this?
from webpack-isomorphic-tools.
@jarzuaga
Why don't you just compile the bundle with Webpack config publicPath
set to a CDN?
from webpack-isomorphic-tools.
@catamphetamine The problem I'm trying to solve is being able to build the application once and deploy it to different environments with different CDN paths. You can't use output.publicPath
for that, as it hardcodes the CDN path on compile time. For that, you can use the __webpack_public_path__
free variable as shown here: https://webpack.js.org/guides/public-path/#on-the-fly.
I'm setting that variable on my entry points on the client side and that's working fine. However, on the server side, I couldn't find where to do this. I tried the server's entry point but all I get is a type error about __webpack_public_path__
being undefined.
from webpack-isomorphic-tools.
@jarzuaga
I see now.
The assets source from webpack stats has shape:
module.exports = __webpack_public_path__ + \"9059f094ddb49c2b0fa6a254a6ebf2ad.jpg\"
__webpack_public_path__
is defined at:
webpack-isomorphic-tools/source/plugin/write assets.js
Lines 167 to 169 in 59aa50f
write_assets()
is called here:
webpack-isomorphic-tools/source/plugin/plugin.js
Lines 190 to 193 in 59aa50f
So, basically, __webpack_public_path__
gets overwritten for each asset and then the asset source code is compiled at
From:
module.exports = __webpack_public_path__ + \"9059f094ddb49c2b0fa6a254a6ebf2ad.jpg\"
To:
var __webpack_public_path__ = '...'
module.exports = __webpack_public_path__ + \"9059f094ddb49c2b0fa6a254a6ebf2ad.jpg\"
And in webpack-assets.json
there's already compiled value for the asset:
"https://.../9059f094ddb49c2b0fa6a254a6ebf2ad.jpg"
If you want __webpack_public_path__
not to be overridden then you can define some new option, like compileWebpackPublicPath: false
, and in this case write assets.js
wouldn't substitute it at compile time. But if it's not substituted then it would mean that it will throw __webpack_public_path__ is undefined
when it compiles the asset. So the asset can't be compiled. Or, actually, the asset source could be modified to return:
module.exports = "__webpack_public_path__ + \"9059f094ddb49c2b0fa6a254a6ebf2ad.jpg\""
If this gets compiled then it would return:
__webpack_public_path__ + "9059f094ddb49c2b0fa6a254a6ebf2ad.jpg"
And then, when the application require()
s the asset it could theoretically be compiled at run time with __webpack_public_path__
being defined. Maybe that would work, but maybe that wouldn't.
So, in short: the current handling of assets replaces __webpack_public_path__
at compile time and it excludes the cases when users would define __webpack_public_path__
at runtime.
If someone wants, they can rewrite the logic for handling such "simple" assets.
I guess no one would, because that could take several days.
Still, I'm re-opening this issue because it is valid.
from webpack-isomorphic-tools.
Gotcha. Would you know if this something that could be accomplished in an "easier" way in universal-webpack
? I have another app running with universal-webpack
on which I need to solve for this as well. I can open an issue on that repo if you prefer.
from webpack-isomorphic-tools.
I guess universal-webpack
is easier in a sense that it doesn't re-implement Webpack but rather is just a Webpack configuration generator.
No need to open an issue of universal-webpack
unless you know something is a bug.
from webpack-isomorphic-tools.
I see. I'm going to try it on that other application with universal-webpack
and let you know how it goes. Thanks for the help.
from webpack-isomorphic-tools.
@jarzuaga do you have any insights :)?
from webpack-isomorphic-tools.
On webpack-isomorphic-tools
is what @catamphetamine mentioned. We would need to submit a PR to modify that logic. I tried the same on universal-webpack
and wasn't able to make it work either. Ultimately or the server I added an extra env variable I called CDN_URL_OVERRIDE
and did a replace of CDN_URL
with that new one on the assets. For the client I just did what's recommended here: https://webpack.js.org/guides/public-path/#on-the-fly
from webpack-isomorphic-tools.
yeah. I guess our all problem is the SSR and not the client.. anyway, if you have any PR for that, please share it with us in here :)
Thanks!
from webpack-isomorphic-tools.
@jarzuaga I had a similar thought: as a hacky workaround one could write a basic Node.js script taking path to a file and replacing all CDN_URL substrings in it with a custom CDN URL and then running node
process for that file (see child_process
).
Example:
node ./replace-and-run.js ./path/to/bundle.js CDN_URL CUSTOM_CDN_URL
from webpack-isomorphic-tools.
https://gist.github.com/joshsten/971117712d920023b61699ddbc22e8ca
from webpack-isomorphic-tools.
Related Issues (20)
- Seems like my webpack.config.js file is getting ignored HOT 1
- Error while wepback build HOT 2
- Is it possible to have _style property in production using ExtractTextPlugin loader HOT 2
- webpack_asset_path is not defined HOT 3
- Keep getting errors module not defined and exports not defined HOT 9
- Ability to ignore warnings / errors HOT 6
- Ability to specify publicPath at runtime for server-side? HOT 1
- Inside CSS, background-url is packaged into absolute paths HOT 1
- Support for compression webpack plugin (js.gz) HOT 1
- Resolving webpack custom module paths HOT 1
- SyntaxError: Unexpected token < (skipping require call, fallback to original loader) HOT 5
- webpack-isomorphic-tools/plugin ReferenceError: window is not defined HOT 11
- Depreciation for webpack 4x HOT 2
- Clarification in README HOT 2
- mini-css-extract-plugin HOT 1
- Webpack resolve extensions not working with SSR
- Babel 7 is not supported HOT 4
- (/config/webpack-assets.json not found) HOT 1
- Unexpected token less file HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-isomorphic-tools.