webpack-4

I am dynamically calling an import statement in my typescript code, based on that webpack will create chunks like below: you can see Webpack is automatically generating the file name as 1,2,3 respectively, the name is not a friendly name I have tried a way to provide the chunk name through comment, but it's generating modulename1.bundle.js , modulename2.bundle.js bootStrapApps(config) { config.apps.forEach(element => { registerApplication( // Name of our single-spa application element.name, // Our loading function () => import(/* webpackChunkName: "modulename"*/ "../../" + config.rootfolder +

I am migrating JS files to Typescript and my goal is, to be able to use both JS and Typescript classes in Vue. I know, I can convert Vue scripts into Typescript, but I don't want to do it right now. The problem arises in a component.vue file: this.exceptionHandler = app.resolve('ExceptionHandler'); The errror I get in the browser's console is this (compilation is ok): "TypeError: Cannot call a class as a function" ExceptionHandler is defined in a TypeScript .ts file. The question is: Is it possible to first transpile the TS code to JS ES6, then put the code together and then run Babel on

How to use loader for mp4 video format with webpcak 4, I try like this: { test: /\.mp4$/, use: 'file-loader', loader: 'file-loader?name=videos/[name].[ext]', }, and import like this import pressButtonAnimated from './images/pressButtonAnimated.mp4' But it does not work for me, and I get an error You may need an appropriate loader to handle this file type. But this one is work for me, but I don wanna add in each file import pressButtonAnimated from '-!file-loader!./images/pressButtonAnimated.mp4' The way how you declare your loader is not right. You are mixing two ways to define loaders. { test

When I try to import SVG Image then the following error shows. Which loader I have to use for importing SVG images? ./static/Rolling-1s-200px.svg 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107

This article webpack 4: mode and optimization seems to suggest that when mode is set to development the devtool is set to eval . I was expecting this to trigger sourcemap generation but running the webpack-4-quickstart in either development or production mode results in no sourcemaps being generated. How can I generate sourcemaps with webpack 4? I think what you are expecting is extracted file including source maps like 'bundle.js.map', but eval type doesn't generate separate file: eval - Each module is executed with eval() and //@ sourceURL. This is pretty fast. The main disadvantage is that

According to the Webpack 4 documentation , if I specify libraryTarget: 'umd' it should result in the following output: (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports["MyLibrary"] = factory(); else root["MyLibrary"] = factory(); })(typeof self !== 'undefined' ? self : this, function() { return _entry_return_; }); However, what I get is: (function