-
-
Notifications
You must be signed in to change notification settings - Fork 871
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 load images and other static assets? #45
Comments
for example and for fonts, you could add the following :
|
server does not understand image extension, you need use require hook for ssr |
also you can add in this file server require('babel-register')
if (development variable) require.extensions['.png'] = function () {};
require('./server') |
I've used https://github.com/tcoopman/image-webpack-loader to deal with the images. I think it is based on file-loader, but allows you to optimise images. |
closing this |
@jaredpalmer hey man, thanks for the awesome kit :) i'm sorry to drudge this back up, but may i ask how you are handling SSR images/statics like fonts in your projects? for example, how are you approaching: // logo-component.js
import LogoImage from './logo.png' // colocated image in component folder
export default ({ linkUrl }) =>
<a href={linkUrl}>
<img src={LogoImage} alt="Logo" />
</a> i've been using thanks again jared, any direction, boilerplate or webpack config you could provide would be greatly appreciated, and i'd be happy to submit a PR if it's something you want to add to starter i suspect i'm probably overlooking a super simple solution.... thanks again!! :) |
All you need to do install ....
{
test: /\.(gif|jpe?g|png|ico)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
loader: 'url-loader?limit=10000'
}
... You can then just require them in exactly as you described above. BTW the limit parameter just tells EDIT: Also remove |
@jaredpalmer thanks for the response :) that's exactly the issue i was running into... like i said, i was able to resolve using https://www.npmjs.com/package/webpack-isomorphic-tools but it really feels very clunky... @rowellx68 you mentioned using image-webpack-loader—could you maybe elaborate? @b2whats would you mind providing some additional context or example for your |
@justingreenberg babel-register can't handle the image file types, a workaround is to modify server: require('babel-register');
if (process.env.NODE_ENV == 'development') {
require.extensions['.png'] = function () {};
require.extensions['.jpg'] = function () {};
require.extensions['.jpeg'] = function () {};
require.extensions['.woff'] = function () {};
require.extensions['.woff2'] = function () {};
require.extensions['.ico'] = function () {};
require.extensions['.svg'] = function () {};
}
require('./server'); |
@justingreenberg ...
{
test: /\.(png|jpg|jpeg|gif)(\?.*)?$/,
loaders: [
'file',
'image-webpack?' + JSON.stringify({
bypassOnDebug:true,
progressive: true,
optimizationLevel: 7,
interlaced: true,
pngquant: {
quality: "65-90",
speed: 4
},
svgo: {
removeUnknownsAndDefaults: false,
cleanupIDs: false
}
})
]
}, I would still use |
@rowellx68 @b2whats should we create a PR for this with |
@jaredpalmer re: patching require workaround, this is an interesting approach... so manually registering extensions with require just allows the module to hit re: image-webpack, that was my understanding (really an optimization) but i thought maybe there was something i was missing for node usage since @rowellx68 said he was using it for images thanks again! |
@jaredpalmer @justingreenberg re: |
@rowellx68 |
I have modified build scripts. There is now a pbulic folder for you robots.txt, favicon etc. It's not the "perfect solution" but it works. Bundles js -> Will explore @justingreenberg 's requireHooks solution as that would allow for inlining and cache busting. |
hey all, let me know if this is out of scope, but the static assets discussion seemed somewhat relevant. I'm someone who is fairly new to the webpack world (read: no clue how to use it yet) and I'm trying to use this project to build a web app using a client's style guide. rather than reapplying CSS styles over and over I'm trying to load a CSS file that contains the client's style guide. is there a quick and relatively painless way to load their stylesheet statically and then use aphrodite to manage layout, etc? |
What about bundling the server entry with webpack using Edit: just saw it is already being done for prod, but why not dev too? |
Hello,
What is the best way to load images and other assets that will work for both client & server?
I could add
url-loader
andfile-loader
to webpack config but it will not work on the server.Are there other options?
Thanks,
Ran.
The text was updated successfully, but these errors were encountered: