javascript - Webpack - Vyžadování obrázků pomocí file-loader

Používám Webpack pro svou aplikaci v Reactu.

Nainstaloval jsem 'File-loader' a 'Url-loader' do mé konfigurace webpacku.

Nevím však, jak propojit obrázky s mými komponentami. Uložil jsem 'src' pro obrázek do souboru 'Data.js', odkud předávám data pro obrázek do react komponenty.

Můj webpack.config.js:

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

Přečtěte si více →

javascript - Proč je můj balíček Webpacku tak velký?

Píšu nějaký JavaScript, který používá Moment.js a Handlebars. Moment.js by měl mít 30 KB po gzipování a Handlebars by měl mít méně než 10 KB po gzipování. Ale když používám Webpack k zabalení mého kódu, dostanu výsledný soubor, který má 271 KB!

Nainstaloval jsem webpack-bundle-size-analyzer, abych to prozkoumal, a našel mnohem větší soubor

Přečtěte si více →

javascript - Jak NEřešit cesty pomocí Webpacku?

Pracuji na projektu ReactJs s Webpackem a sass-loader, css-loader & url-loader.

Chtěl bych neresolvovat cesty k font-face a ponechat je přesně tak, jak byly nastaveny v souboru SASS.

Problém:

Pokud zavolám absolutní cestu (např.: http:

Přečtěte si více →

javascript - Webpack nemůže importovat balíček nainstalovaný z git

Takže jsem vytvořil fork balíčku v gitu. Provedl jsem své změny. Pak v mém terminálu

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

A pak se pokusím importovat balíček do svého kódu takto

import DDP from 'ddp.js'

Ale webpack mi dává tuto chybu

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/c

Přečtěte si více →

javascript - Webpack plugin: Jak dynamicky přidat loader k modulu?

Píšu plugin pro Webpack. Během řešení modulů by měl tento plugin dynamicky přidat konkrétní loader pro některé moduly, ale ne pro všechny.

Moje současná myšlenka je využít událost after-resolve ze normal-module-factory. Tam bych mohl modifikovat pole

Přečtěte si více →

javascript - Balíčkování komponenty Stencil s webpackem

Ví někdo, jak zabalit webovou komponentu vytvořenou ve Stencil pomocí webpacku? Mám více komponent Stencil a potřebuji vytvořit balíček, abych ho mohl používat v jiných projektech.

Odpověď č. 1

Ionic vyvinul StencilPlugin pro webpack, který umožňuje snadno importovat komponenty pomocí balíčka webpack.

Možná vás bude také zajímat tento vynikající článek, který podrobněji vysvětluje, jak používat plugin.

Odpově

Přečtěte si více →

javascript - Argument cesty ve Webpacku není řetězec

Lámu si hlavu, abych přišel na to, proč Webpack říká, že u vstupního modulu "app" není cesta řetězec. Není to přesně totéž jako jiné chyby, o kterých jsem četl na StackOverflow, a proto mě to vede k tomu, že se na otázku ptám sám.

Používám nejnovější Webpack (5.16) a Webpack-cli (4.4) a snažím se sestavit toto, aby to běželo na Nod

Přečtěte si více →

javascript - Zásadní změny Webpacku pro vestavěné moduly na webu Gatsby

Zkoušel jsem nasadit svůj Gatsby web na Netlify, ale stále dostávám tyto chyby u různých modulů Node pokaždé, když se pokusím nasadit. Zkoušel jsem vytvořit soubor webpack.config.js a zahrnout obě navrhované řešení, ale bez úspěchu. Také jsem zkoušel použít alias místo fallback, přidat sekci br

Přečtěte si více →

javascript - Přidat závislost v pluginu Webpack

Je možné přidat závislost z prostředí pluginu Webpack? Generuji soubory, které používají šablony, a když se tyto šablony změní, rád bych, aby webpack --watch spustil další sestavení.

Zde je plugin:

function BlahPlugin (options) { this.options = options; } BlahPlugin.prototype.apply = function (compiler) { // Th

Přečtěte si více →

javascript - webpack-dev-server nevytváří složku dist lokálně

Webpack-dev-server úspěšně sestavuje html, scss a js soubory a výstup je také servírován na localhost:8080, ale složka dist se místně nevytváří. Následuje moje konfigurace webpacku:

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

Přečtěte si více →