Comments (12)
You should not use file-loader
with asset/resource
, you don't need this loader with webpack anymore
from file-loader.
I will update docs in near future
from file-loader.
@alexander-akait but if I don't use file-loader for images then my webpack don't know where to look for images. even if I add alias and have image path ~assets/images/cat.png
then browser keeps looking at localhost:8080/assets/css/~assets/images/cat.png
(image defined in DOM) or localhost:8080/assets/images/cat.png
(image defined in CSS). I have defined public path to /
.
Alias definition:
resolve: {
alias: {
assets: path.resolve(__dirname, 'src/assets'),
},
}
so, do you have any suggestions how to load images successfully without file-loader, image name is hashed and then webpack can match path with hashed one?
from file-loader.
Expected, webpack@5 use publicPath: 'auto'
by default and you don't need provide public path (if you don't use CDN)
I don't understand your problem, please clarify, don't use ~
from file-loader.
If you followed the issue template and filled in all the fields, you would get an answer and a solution long ago, I want to show for the future how formal things is help to other developers
from file-loader.
Custom output path https://webpack.js.org/guides/asset-modules/#custom-output-filename (same like outputPath
), you don't need publicPath here
from file-loader.
from file-loader.
@alexander-akait
Hello, I still don't understand one thing, please tell me.
DEPREACTED for v5: please consider migrating to asset modules.
I have replaced file loader with asset modules, but I can't find how to set publicPath
in asset modules.
Expected, webpack@5 use publicPath: 'auto' by default and you don't need provide public path (if you don't use CDN)
You said that in webpack@5, don't need to set publicPath
if not using a CDN.
So what should I do if I use a CDN? Continue to use file loader?
In other words, is the following configuration equal before and after migration?
Use file loader:
file.rule.js
module.exports = {
test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: "file-loader",
options: {
name: "[name].[contenthash].[ext]",
outputPath: "img",
publicPath: "/img",
}
};
Use asset modules:
webpack.config.js
module.exports = {
...
output: {
path: distPath,
filename: (chunkData) => {
if (chunkData.chunk.name === entryName.devtools) {
// Only used in local and development which no cache header
return "assets/[name].js";
}
return "assets/[name].[contenthash].js";
}
},
module: {
rules: [
{
test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
type: 'asset/resource',
generator: {
filename: 'img/[name].[contenthash].[ext]'
}
}
]
}
};
I set publicPath:"/img"
when using the file loader, will using webpack default settings after migrating to the asset module have any other impact? Are you sure it's okay not to set publicPath
here?
The images in the current project are displayed normally. But path like https://example.com/assets/... /img/demo.79e0ee9763e097c6d113.svg
looks like an odd path URL.
from file-loader.
Why do you need CDN publicPath
only for assets?
from file-loader.
@alexander-akait
Currently there is no such need, just saw you mention "if you don't use CDN", curious to ask.
So in webpack5, things like https://example.com/assets/... /img/demo.79e0ee9763e097c6d113.svg
will not have side effects, right? It can be parsed correctly by any browser.
from file-loader.
Yes, but why you need /../
?
from file-loader.
@alexander-akait
This is exactly why I said the URL address is strange. I always thought this was the behavior of Webpack@5, configured as follows.
module.exports = {
...
output: {
path: distPath,
filename: (chunkData) => {
if (chunkData.chunk.name === entryName.devtools) {
// Only used in local and development which no cache header
return "assets/[name].js";
}
return "assets/[name].[contenthash].js";
}
},
module: {
rules: [
{
test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
type: 'asset/resource',
generator: {
filename: 'img/[name].[contenthash].[ext]'
}
}
]
}
};
Does it look like it's to make the img
and asset
directories the same level?
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
- 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.