Questions tagged webpack-4

Explore the latest questions and answers asked by our top developers.

Remove Code blocks based on Environment Nx Angular

I’m really interested in inserting or removing code blocks in my Angular App based on the environment. Specifically removing certain import declarations and related code that should not be used for Production keeping the bundle light, while getting the benefit of extra code in the dev environment. I know webpack can handle code trasformations, so […]

Webpack: Refer currently processing file name in configs

I am trying to replace a string with the filename in webpack bundling. Is there a way I can get the webpack config to give me the file name of the currently processing file? So that I can use it with the webpack-plugin-replace somwthing like , plugins: [ … new ReplacePlugin({ values: { ‘__CUSTOM_STRING’: CURRENTLY_PROCESSING_FILENAME, […]

Integrate a React MFE with Angular JS project(parent project) using webpack(or webpack module federation)

We have a parent or host project which is on Angular JS and we are creating a new React app, and would like to integrate React app as MFE with the host project. We would not like to make lot of changes in the host project but wanted to check if we can use webpack/webpack […]

Missing :host {} css in the build made with Webpack for Angular

I’m doing a rewrite of webpack.config.js from version 3 to 4. Angular version is 11.2.12 It builds, and starts up. However there is a problem in .scss files (besides that everything else is working fine): :host {} is not linked to angular _nghost-lpg-c7 attributes and nothing from the css inside :host is rendered in the […]

By eZo
Categorized as angular, sass, sass-loader, webpack, webpack-4 Tagged , , , ,

webpack-dev-server builds and rebuilds very slow in Webpack 4

As mentioned in the title, the webpack-dev-server build and rebuild time is very slow in my project in Webpack 4. It takes about 4-5 minutes to build and another 80-90 seconds to re-build. Any kind of help is appreciated. Here are my local project file details: package.json "build:local": "webpack-dev-server –config configs/build_config/webpack.local.js –inline –progress –profile –port […]

Webpack 4.23.1 , Anguar 7 build error RangeError: Invalid string length

RangeError: Invalid string length at ConcatSource.source (/apps/project_name/node_modules/webpack- sources/lib/ConcatSource.js:42:56) at CachedSource.source (/apps/project_name/node_modules/webpack- sources/lib/CachedSource.js:28:44) at writeOut (/apps/project_name/node_modules/webpack/lib/Compiler.js:330:28) at asyncLib.forEach (/apps/project_name/node_modules/webpack/lib/Compiler.js:348:7) at baseEach (/apps/project_name/node_modules/neo-async/async.js:2421:9) at Object.each (/apps/node_modules/neo-async/async.js:2854:9) at emitFiles (/apps/project_name/node_modules/webpack/lib/Compiler.js:311:13) at /apps/project_name/node_modules/mkdirp/index.js:49:26 at FSReqWrap.oncomplete (fs.js:153:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] compile:server: `node –max_old_space_size=6144 node_modules/webpack/bin/webpack.js –config webpack.server.config.js –progress –colors` above. I have tried […]

Is there a way to see Angular’s webpack configuration?

I’m experimenting with @angular-builders/custom-webpack but sometimes it’s hard to know what needs to be changed, as I can’t see the original Angular-created configuration. I couldn’t find a webpack configuration file (other than some test cases) in the angular/angular or the angular/angular-cli source so I’m guessing it’s somehow generated on the fly based on angular.json. Is […]

By Edward Prendergast
Categorized as angular, webpack, webpack-4 Tagged , ,

Why are flattened ES modules (FESM) more performant than unflattened ES modules (ESM)?

According to the Angular Package Format document, Angular packages are distributed as two kinds of ES modules: Flattened ES modules (FESM), where the import statements are removed and the imported code is inlined. Unflattened ES modules (ESM), where the import statements are left untouched. The package.json’s module value points to the FESM version. The reason […]

How to import and use npm packages in background.ts of chrome extension built using angular 10

I am creating a google chrome extension using angular 10. Is it possible to import npm package in background.ts (after transpilation background.js). If yes, then how can we import it and bundle it, so that it can be added in manifest.json file. I am using @angular-builders/custom-webpack package to convert background.ts to background.js via webpack. custom.webpack.config.js […]

How to remove hash from a particular bundle file name, on creating prod build in angular 10

I am trying to create a chrome extension using angular 10. On doing ng build –prod, hash is getting appended in the background.js bundle file like "background.6f24e1b6d7ac365xxxxx.js". Is there a way I can remove the hash only for this bundle on doing ng build –prod?. One thing I can do is renaming of this file […]

1 2

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us