WebPack URL-Loader ou File-Loader ne fonctionne pas de réagir
Les images ne se chargent pas dans le navigateur à l'aide de WebPack 4 avec l'URL-loader ou le chargeur de fichiers. Les petites images ne sont pas dans l'URL de données (ou si elles sont le navigateur ne les affiche pas) et que les demandes de réseau ne sont pas effectuées avec le chargeur de fichiers.
Nginx sert les images correctement à https://{server}/images/image_name.png, mais non https://{server} Et aucun appel au réseau d'images n'est effectué dans le panneau Réseau d'inspecteur Web.
Meilleure supposion jusqu'à présent est WebPack URL-Loader ou File-Loader ne doit pas générer la bonne URL. Impossible de trouver l'hôte lors de la recherche app.bundle.js pour l'URL. J'ai essayé depuis des jours toutes les combinaisons de publicPath, outputPath, etc. de tous les autres postes Stackoverflow, rien ne fonctionne.
Y a-t-il un moyen de voir l'URL selon laquelle WebPack génère en plus de rechercher le JS? La configuration WebPack n'est-elle pas appropriée? Dépannage des conseils?
Voici comment je gère des images dans le code:
import nav_logo from "Images/white_nav_logo.svg";
<img src={nav_logo} />
Voici mon webpack.common.js:
module.exports = {
mode: mode,
entry: {
app: ["./src/js/app.js"]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: '[name].bundle.js',
publicPath: '/',
chunkFilename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.(sc|c|)ss$/,
issuer: {
exclude: /\.less$/,
},
use: [
{
loader: 'style-loader',
options: {
},
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
localIdentName: '[name]-[local]-[hash:base64:5]',
},
},
],
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
],
},
{
test: /\.(jsx?)/,
exclude: ["/node_modules", "/src/js/Elm"],
use: [
{ loader: "babel-loader?cacheDirectory=true",
}
]
},
{
test: /\.scss$/,
issuer: /\.less$/,
use: {
loader: './src/js/sassVarsToLess.js'
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[ext]',
}
},
{
loader: "image-webpack-loader",
options: {
disable: true,
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: true,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
],
},
{
test: /\.(ttf|otf|eot|woff2?)$/,
loader: "file-loader",
options: {
name: 'fonts/[name].[ext]',
}
}
],
noParse: [/\.Elm$/]
},
node: {
fs: 'empty'
},
plugins: [
new Dotenv(),
new CopyWebpackPlugin([{
from: "./src/assets/css",
to: "css"
},
]),
]
};
et webpack.prod.js
module.exports = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.(sc|c|)ss$/,
issuer: {
exclude: /\.less$/,
},
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
localIdentName: '[name]-[local]-[hash:base64:5]',
},
},
],
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
],
},
{
test: /\.(jsx?)/,
exclude: ["/node_modules", "/src/js/Elm"],
use: [
{ loader: "babel-loader?cacheDirectory=true",
}
]
},
{
test: /\.scss$/,
issuer: /\.less$/,
use: {
loader: './src/js/sassVarsToLess.js' // Change path if necessary
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name]-[hash:8].[ext]'
}
},
{
loader: "image-webpack-loader",
options: {
disable: false,
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: true,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
],
},
{
test: /\.(ttf|otf|eot|woff2?)$/,
loader: "file-loader",
options: {
name: 'fonts/[name].[ext]',
}
}
],
noParse: [/\.Elm$/]
},
optimization: {
minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin({})]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/assets/prod.index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
})
et voici Nginx Default.conf
server {
listen 80;
server_name <domain_name>;
root /usr/share/nginx/html;
access_log /var/log/nginx/Host.access.log main;
index index.html;
location / {
try_files $uri $uri/ =404;
}
location /images/ {
alias /usr/share/nginx/html/images/;
try_files $uri $uri/ =404;
error_log /var/log/nginx/error.log debug;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
url-loader Ne loge pas l'image en tant que fichier séparé, il code le fichier dans le format de base64 et l'inclure dans JS Bundle. Par conséquent, il n'y aura aucune demande séparée au fichier image. Voir cette réponse: RL-Loader VS File-Loader Webpack
Essayez de charger des images avec file-loader au lieu. Je charge généralement les polices et les images avec file-loader Et cela fonctionne correctement.
J'utilise cette configuration de travail (développement):
// this is configured outside of the exported webpack configuration code
const BASE_DIR = resolve(`${__dirname}`);
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
resolve: {
modules: [
resolve(BASE_DIR),
'node_modules'
]
},
output: {
// ...
publicPath: '/'
},
module: {
rules: [
// ...
{
test: /\.(png|svg|jpg|jpeg|gif|tiff)$/,
use: [
'file-loader?name=assets/[name].[ext]'
]
},
// ...
]
}
// ...
}
Mon fichier image est physiquement situé à 'src/actif/logo_arc.png' et je l'utilise de cette façon:
import logo from 'src/assets/logo_arc.png';
// ...
<img src={logo} alt={'company logo'} />
Je peux voir mon fichier situé dans le répertoire de développement de développement sous le sous-répertoire assets comme je m'attendais.
Lors de l'exécution de l'application sur WebOpack Dev Server (sur localhost, mon port personnalisé 9901) L'image est servie à l'adresse http://localhost:9901/assets/logo_arc.png.
Dans le forfait de développement, je peux voir cela impliquée des parties:
// definition of webpack public path
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
// ...
// the image itself as a webpack module
/***/ "./src/assets/logo_arc.png":
/*!*********************************!*\
!*** ./src/assets/logo_arc.png ***!
\*********************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("module.exports = __webpack_require__.p + \"assets/logo_arc.png\";//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvYXNzZXRzL2xvZ29fYXJjLnBuZz8wMmVlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGlCQUFpQixxQkFBdUIiLCJmaWxlIjoiLi9zcmMvYXNzZXRzL2xvZ29fYXJjLnBuZy5qcyIsInNvdXJjZXNDb250ZW50IjpbIm1vZHVsZS5leHBvcnRzID0gX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyBcImFzc2V0cy9sb2dvX2FyYy5wbmdcIjsiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/assets/logo_arc.png\n");
/***/ }),
// importing webpack module into variable, it is used later in the img element
var src_assets_logo_arc_png__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! src/assets/logo_arc.png */ "./src/assets/logo_arc.png");
// ...
// usage in the img element
react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", {
src: src_assets_logo_arc_png__WEBPACK_IMPORTED_MODULE_7___default.a,
alt: 'company logo'
}))