javascript - Webpack - Kræv billeder ved hjælp af file-loader

Jeg bruger Webpack til min React-app.

Jeg installerede 'File-loader' og 'Url-loader' i min webpack-konfiguration.

Men jeg er ikke sikker på, hvordan jeg linker billeder til mine komponenter. Jeg opbevarer 'src' for billedet i en 'Data.js'-fil, hvorfra jeg sender dataene for billedet til React-komponenten.

Min webpack.config.js:

... const PATHS = { app : path.join( __dirname, "app" ), build : path.join( __dirname, "build" ) }; const common = { entry

Læs mere →

javascript - Hvorfor er min Webpack-pakke så stor?

Jeg skriver noget JavaScript, som bruger Moment.js og Handlebars. Moment.js skulle være 30 KB gzippet, og Handlebars skulle være mindre end 10 KB gzippet. Men når jeg bruger Webpack til at bundte min kode, får jeg en resulterende fil, som er 271 KB!

Jeg installerede webpack-bundle-size-analyzer for at undersøge og fandt meget større filer

Læs mere →

javascript - Hvordan IKKE løse stier med Webpack?

Jeg arbejder på et ReactJs-projekt med Webpack og sass-loader, css-loader og url-loader.

Jeg vil gerne ikke opløse font-face-stierne og beholde dem præcis, som de blev sat i SASS-filen.

Problemet:

Hvis jeg kalder en absolut sti (dvs.:

Læs mere →

javascript - Webpack kan ikke importere pakke installeret fra git

Så jeg forgreinede en pakke i git. Lavede mine ændringer. Derefter i min terminal

npm install --save git+https://github.com/hayk94/ddp.js.git

Og så prøver jeg at importere pakken i min kode som dette

import DDP from 'ddp.js'

Men webpack giver mig denne fejl

ERROR in ./main.js Module not found: Error: Can't resolve 'ddp.js' in '/Users/hayksafaryan/projects/b2cEmbedLib' @ ./main.js 23:11-28 @ multi (webpack)-dev-server/

Læs mere →

javascript - Webpack-plugin: Hvordan tilføjer man dynamisk en loader til et modul?

Jeg skriver en Webpack-plugin. Under modulopløsning bør denne plugin dynamisk tilføje en specifik loader til nogle moduler, men ikke til alle.

Min idé lige nu er at udnytte normal-module-factory's after-resolve-begivenhed. Der kunne jeg ændre arrayet

Læs mere →

javascript - Bundling stencil-komponent med webpack

Ved nogen, hvordan man bundler webkomponenten, der er oprettet med Stencil, ved hjælp af webpack. Jeg har flere Stencil-komponenter og har brug for at oprette en bundle, så jeg kan bruge den i andre projekter.

Svar #1

Ionic har udviklet en StencilPlugin til webpack, som gør det nemt at importere komponenter ved hjælp af webpack-bundleren.

Du kan også være interesseret i denne fremragende artikel, som forklarer mere detaljeret, hvordan man bruge

Læs mere →

javascript - Webpack-stiargumentet er ikke en streng

Jeg har kløet mig i hovedet for at finde ud af, hvorfor Webpack siger for indgangsmodulet "app", at stien ikke er en streng. Det er ikke helt det samme som de andre fejl, jeg har læst om på Stack Overflow, hvilket er grunden til, at det får mig til at stille spørgsmålet selv.

Jeg bruger den seneste Webpack (5.16) og Webpack-cli (4.

Læs mere →

javascript - Webpack ændringer, der bryder indbyggede moduler på Gatsby-websted

Jeg har forsøgt at deploye mit Gatsby-site til Netlify, men jeg bliver ved med at få disse fejl for forskellige node-moduler, hver gang jeg forsøger at deploye. Jeg har prøvet at lave en webpack.config.js-fil og inkluderet begge de foreslåede løsninger uden held. Jeg har også prøvet at bruge al

Læs mere →

javascript - Tilføj afhængighed i Webpack-plugin

Er det muligt at tilføje en afhængighed fra inden for en Webpack-plugin? Jeg genererer filer, der bruger skabeloner, og når disse skabeloner ændres, vil jeg gerne have, at webpack --watch udløser en ny build.

Her er plugin'et:

function BlahPlugin (options) { this.options = options; } BlahPlugin.prototype.apply = f

Læs mere →

javascript - webpack-dev-server opretter ikke dist-mappen lokalt

Webpack-dev-server pakker html-, scss- og js-filerne korrekt, og outputtet bliver også serveret på localhost:8080, men dist-mappen bliver ikke oprettet lokalt. Følgende er min webpack-konfiguration:

var extractPlugin = new ExtractTextPlugin({ filename: 'main.css' }); module.exp

Læs mere →