Comments (23)
Why don't you set it to /
instead?
from file-loader.
@mummybot at least in my case the other app is a cordova iphone app, so proxying is not an option.
The core of the problem is that CSS loads assets relative to itself, and js loads assets relative to the HTML. So if the CSS isn't in the same place as the HTML then you can't use relative paths.
It would be good to be able to pass a resolving function to the file loader to allow more complex path resolution.
from file-loader.
The core of the problem is that CSS loads assets relative to itself, and js loads assets relative to the HTML. So if the CSS isn't in the same place as the HTML then you can't use relative paths.
{
test: /\.png$/,
loader: "file-loader?name=images/[name].[ext]"
},
I fix it partially with "url-loader", It generate data:image/png;base64
{
test: /\.png$/,
loader: "url-loader?name=images/[name].[ext]"
},
I replace file-loader with url-loader.
My Webpack.config.js dev mode
const path = require('path');
const webpack = require('webpack');
const ExtractText = require('extract-text-webpack-plugin');
module.exports = {
devServer: { inline: false },
entry: path.join(__dirname, '/src/assets/javascripts/main.js'),
output: {
//path: './dist/assets/',
//filename: './javascripts/[name].js',
//publicPath: '../',
path: './dist/',
publicPath: '/assets/',
filename: './javascripts/[name].js'
// path: './dist/assets/',
// publicPath: '/assets/',
// filename: './javascripts/[name].js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
},
output: {
comments: false
}
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new ExtractText('./stylesheets/main.css', {
allChunks: true
})
],
module: {
loaders: [
{
test : /\.js$/,
include : path.join(__dirname, '/src/assets/javascripts/'),
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loaders: ['style', 'css']
//loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'sass?sourceMap', ExtractText.extract('css!sass')]
},
{
test: /\.(woff|woff2|ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'url-loader?limit=10000&name=fonts/[name].[ext]'
},
{
test: /\.png$/,
loader: "url-loader?name=images/[name].[ext]"
//loader: "file-loader?name=images/[name].[ext]"
},
]
}
};
Other alternative with sass/scss using extract-text-webpack-plugin
{
test: /\.scss$/,
loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap', ExtractText.extract(['css', 'sass'], {
publicPath: '../'
})]
},
from file-loader.
Are you using these in a separate app? If so, have you tried setting up your webpack dev server to proxy the other app, that way you can use '/' as your publicPath base but still forward requests to other app e.g.
var buildPath = '/wp-content/themes/mytheme/build/';
var config = {
entry: [
'webpack-dev-server/client?http://localhost:8080/',
'webpack/hot/only-dev-server',
path.join(__dirname, 'src/index.js')
],
output: {
path: path.resolve(__dirname, 'wp-content/themes/tpbc/build'),
filename: 'index.js',
publicPath: buildPath
},
devtool: 'eval-source-map',
resolve: { alias: {} },
devServer: {
contentBase: buildPath,
proxy: {
'*': {
target: externalServerURL,
bypass: function(req) {
// Make sure that non-webpack assets have the correct host header so any vhost works correctly.
if (req.headers && req.headers.accept) {
// Detect requests that do not contain the build directory
if (req.url.indexOf(buildPath) === -1) {
req.headers.host = externalServerURL.split('/')[2];
}
}
}
}
}
},
from file-loader.
It isn't a very good solution but you can work around this issue by placing the scripts and css in the www folder with the index.html and setting publicPath : ""
. That way it doesn't matter if the files are accessed relative to the html or the css.
from file-loader.
I meet the same problem,do someone knows how to deal with it now?
from file-loader.
I'm having the same problem, not using react but vuejs + cordova.
I tried to setting:
assetsPublicPath: '/',
However the resulting cordova index.html file still ends up with entries like:
<script type=text/javascript src=/static/js/app.2a047fb94d3c535a8f2e.js>
My hacky fix is to just write a little shell script (there is probably a proper webpack post-hook way of doing this but I dunno what it is) to replace all instances of /static/
with static/
and that fixed the problem for me. But not exactly elegant.
I crave a better solution, emailed @export-mike to see if he can share his config with us.
Edit:
Welp actually I'm a dork. The webpack template I'm using has separate sections for assetsPublicPath
on dev vs. production, and I was only setting it for dev.
When I set it for production like:
assetsPublicPath: '',
I got this kind of output in cordova's index.html file:
<script type=text/javascript src=static/js/app.2a047fb94d3c535a8f2e.js>
Which works fine in Cordova and when I tested in iOS simulator.
from file-loader.
For those reading who are using create-react-app
and don't want to eject, this is possible to work around by setting "homepage": "./"
in package.json
.
from file-loader.
Hello. I have faced the same problem trying to pack my web app as "native" ios/android application with Cordova. In my specific case it's a React application with react-router. Web version uses HTML5 History API, so basic relative paths for assets are not work correctly on pages other than "/". But if you use Hash History instead of HTML5 History (which is by the way is recommended for cordova applications, you don't see urls anyway) it seems to work fine.
For more information see this thread: remix-run/react-router#2161
So if it's your case you can set publicPath in webpack config to empty string (so you'll get relative paths) and use Hash History with your router.
from file-loader.
Because I want to use these files in cordova app, using '/' will fail.
from file-loader.
^ bump. The issue I'm having is using vue.js with webpack.
I bind a html tag like this: <img v-bind:src="resource.img">
to dynamically load an image.
when the client renders the page, the src path is correct, however it is the actual relative path (e.g. "../assets/example.png" etc, instead of the path webpack outputs. Thus, the image creates a 404 because there is no image at "../assets/example.png".
Alternatively, if i hardcode the src <img src="../assets/example.png">
the image loads, and the the src is some path that webpack created, finding the correct image.
from file-loader.
yeah same issue here @adcentury any progress?
from file-loader.
closed in #135 and available in v0.11.0
from file-loader.
I have solved my problem with the following vue.config.js
settings:
module.exports = {
publicPath: process.env.BASE_URL,
assetsDir: process.env.BASE_URL
};
I think you can do the same with webpack.config.js
as well by changing output.publicPath
.
Reference: https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules
You can also do publicPath: process.env.BASE_URL + '/static/'
from file-loader.
@export-mike The only way I found is to put all files (include html, js, css, images) into the www folder as @dancoates said. By the way, HtmlWebpackPlugin
may help with generating html files.
from file-loader.
I have a config that's working with Cordova and code push I can share with
you tomorrow. We're on react, react router
On Thu, 16 Jun 2016, 12:43 Ilya Gutsalyuk, [email protected] wrote:
Hello. I have faced the same problem trying to pack my web app as "native"
ios/android application with Cordova. In my specific case it's a React
application with react-router. Web version uses HTML5 History API, so basic
relative paths for assets are not work correctly on pages other than "/".
But if you use Hash History instead of HTML5 History (which is by the way
is recommended for cordova applications, you don't see urls anyway) it
seems to work fine.For more information see this thread: remix-run/react-router#2161
remix-run/react-router#2161So if it's your case you can set publicPath in webpack config to empty
string (so you'll get relative paths) and use Hash History with your router.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#46 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AC2Fn6Nl3PAn87DXcYHg0_8xaMs6iodqks5qMTbOgaJpZM4Gh22j
.
from file-loader.
@export-mike can you post that config?
from file-loader.
Is there a solution for this now?
from file-loader.
I believe I'm also suffering from the same issue and the above gives me:
fs.js:640
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT: no such file or directory, open '/Users/azz0r/Sites/Personal/wwe-draft-generator/build/static/app.bundle.js'
at Error (native)
at Object.fs.openSync (fs.js:640:18)
at Object.fs.readFileSync (fs.js:508:33)
at /Users/azz0r/Sites/Personal/wwe-draft-generator/scripts/build.js:31:29
from file-loader.
I'm using publicPath: ''
which allows you to set it at runtime with __webpack_public_path__
(as per https://webpack.github.io/docs/configuration.html)
My CSS and JS is loading correctly from the CDN environment I upload them to and point towards with __webpack_public_path__
.
If I, however, use file-loader
to load a PNG file in a React component, the resulting path will be calculated from some other algorithm, causing the PNG image to be loaded locally from the web server instead of the CDN.
Is file-loader
supposed to adhere to __webpack_public_path__
?
from file-loader.
@prewk I ran into the same problem, webpack/webpack#971 had the clue that got it working for me.
Add a new entry before your other ones and modify __webpack_public_path__
there.
from file-loader.
Thanks, that's exactly how I'm setting it at the moment, though. I ended up not using the file-loader
for my problem and going for data-uris instead.
from file-loader.
Is there a solution for this now? v1 or v2
require image in css and js
from file-loader.
Related Issues (20)
- More documentation around esModules and their behavior please HOT 5
- In the webpack watch mode, the missing image output will appear HOT 1
- Jpeg-2000 support HOT 2
- Provide file stats via named exports HOT 1
- import png from './image.png'; png is object,is not a url(string) HOT 1
- copying images with picture tag HOT 2
- RFC: uglify option HOT 4
- Problem with import webp image HOT 1
- Pass additional assetInfo object when calling emitFile HOT 2
- Is the CDN example correct? HOT 2
- postTransformPublicPath does not work with runtime variables/methods HOT 2
- Breaking change desc in 5.0.0 can be improved HOT 1
- Breaking change desc in 5.0.0 can be improved HOT 5
- Support for loader chaning HOT 1
- 6.2.0 breaks file-loader for me HOT 3
- [Feature Request]Make `emitFile` tree shakingable HOT 6
- asset/resource hash in name HOT 12
- Random uppercase directory being generated HOT 1
- OTS parsing error: invalid version tag | Failed to decode downloaded font: http://localhost:3000/static/7542ab376339625d813fe71d074ee925.woff HOT 3
- OTS parsing error: invalid version tag | Failed to decode downloaded font: http://localhost:3000/static/7542ab376339625d813fe71d074ee925.woff HOT 3
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 file-loader.