Newest 'webpack-4' Questions - Stack Overflow

Questions tagged [webpack-4]

Webpack is JavaScript module bundler. Webpack takes modules with dependencies and generates static assets representing those modules. Webpack's key features are rooted in extensibility and enabling developers to use best-practices in Web Architecture and Web Performance. For usage guidance consult the Webpack "Guides" section: https://webpack.js.org/guides/

0
votes
1answer
11 views

Webpack - optimizarion node_modules & import

Configuring webpack I was wondering something for the optimization. I have two JS files index.js and helper.js. I import helper.js in index.js like that: import * as helper from 'helper.js'; In ...
0
votes
2answers
11 views

Webpack entry with hyphen

In webpack, I am trying to achieve this: entry: { test-1: './src/test-1/main.js', test-2: './src/test-2/main.js', test-3: './src/test-3/main.js' }, ... However, it not possible to have a ...
0
votes
0answers
12 views

using turbolinks, Responsive menu shows mobile on page load and desktop on subsequent turbolinks loads

The Foundation 6 Responsive menu shows the mobile version on initial page load / refresh and is not "responsive". When Turbolinks loads the page, The proper menu appears and it is "responsive". "...
1
vote
0answers
19 views

CopyWebpackPlugin - ignore a folder

Using CopyWebpackPlugin, I am not able to ignore a specific folder or a specific file. It copies everything. What I have done in the webpack.config.js: new CopyWebpackPlugin([ { ...
0
votes
0answers
19 views

Duplicated imports with Webpack 4

Just discovered today that I have a library that's being included 2 times in my project. First, there's: ga-track and then there's ga-track-scroll. The second requires the first to send events and I ...
0
votes
1answer
23 views

webpack4 hot reloading not working for some files

I have a problem with react webpack4 when i try to hot reload the changes fom certain files. And those files where the ones i modified from its original path (/from /src/containers to /src/components) ...
0
votes
0answers
20 views

Is there a rendering style problem in the style-loader? [on hold]

In the development environment, I introduced the CSS file into the JS file, but it was a style rendered by js, which led to incorrect calculation of dom. Visit https://github.com/seafronthu/webpack4-...
0
votes
0answers
11 views

Uncaught TypeError: __webpack_require__(…).context is not a function

When I am trying to import dynamically vue components using this code: const components = require.context('./', true, '/^index.js$/'); I am getting this error: at Module../asset/app.js (app.js:9)...
0
votes
0answers
16 views

Load multiple modules using single import

I use Webpack to load SVG icons. Most icons have some CSS associated with it. I would like to keep styles for each icon in separate file. So it's needed some convenient way to include it in CSS bundle ...
0
votes
0answers
9 views

Webpack resolve extensions .vue ignored

I'm configuring webpack 4 and babel to build my vue project in production. It use to work but after fixing some npm high vulnerabilities and making some edits in the webpack config, I have many errors ...
0
votes
0answers
32 views

Webpack 4 doesn't save generated html, css and js into dist folder

I created project and tried to configure webpack, but I couldn't understand why it doesn't save generated files into dist folder. Project stucture: /client /actions /assets others folders /styles ...
0
votes
0answers
22 views

Webpack compile sass into css file problem

Firstly I'd like to say that I've seen same question but I cannot upvote nor comment to say that I'm in the same need. So it's clearly a duplicate of How to use Webpack 4 to compile Sass files ...
1
vote
0answers
33 views

Require modules from Webpack bundle inside HTML

I'm migrating away from brunch to Webpack (using Laravel Mix) and I'm trying to achieve the same workflow I was using before, which is basically: Having just two bundles for the whole application: ...
0
votes
0answers
10 views

Set global to false for polyfills

I can't figure out how I can set the global flag to false for babel preset-env polyfills in Webpack. I use Webpack4 and Babel7. I have already looked in the source code and Googled for options. The ...
0
votes
1answer
12 views

Install Vue 2 in a Phoenix 1.4 Application with Webpack 4

I want to install Vue 2 in a new Phoenix 1.4 project. I am using Webpack 4. The documentation for Vue does not provide much guidance.
0
votes
0answers
21 views

failing to import a .gltf file with webpack

I'm struggling to import .gltf files with Webpack (gatsby project with react+webpack+react-three-fiber). In development mode, I get this error: This relative module was not found: ⠀ * ../../static/...
1
vote
1answer
47 views

Webpack hot reload using webpack dev server and rails server

My current application is set up using Ruby on Rails and React/Typescript. I am trying to set up hot reloading. Here is the current folder structure Project Root - app => all the rails code - ...
0
votes
0answers
13 views

Module build failed (from ../node_modules/babel-loader/lib/index.js): Error: Must export a default export when using ES6 modules

How can I prevent the babel loader from checking the default export on the index.js page ? I need this because I am unable to bypass the webpack compilation. I tried playing with useBuiltIns key in @...
2
votes
1answer
28 views

Webpack throws warning despite specifying mode

I am following a tutorial on webpack 4 where the person indicated that I do not need to specify a config file. Here are my npm commands: webpack --mode development webpack --mode production But ...
0
votes
0answers
18 views

Webpack 4, Use splitChunks to create dynamice css file names not defined in entrypoint

I am trying to use webpacks splitChunks to add another css file [grace.scss] to my bundle. I have one js entry point that creates js/main.js and css/main.css. We require themes so I would also like to ...
0
votes
0answers
9 views

Babel 7 / Webpack 4 / Karma issue

I am having an issue with running tests now that I have upgraded to Babel 7 and Webpack 4. Previously I had all my tests running as I would expect. Now only the initial import tests work. As an ...
-1
votes
0answers
47 views

Webpack production issue (ReactJs)

I am having issue in webpack production deploy, i am getting the console error saying net::ERR_NAME_NOT_RESOLVED. I think i am missing something somewhere but couldn't figure it out. I have tried ...
0
votes
0answers
19 views

AngularJS, templates & ng-include's SVG

I'm on an AngularJS 1.4 stack, coupled with Webpack 4. We have a huge amount of SVG Icon on our CDN (dedicated library), and as for now, we use SVG in our templates like this : <ng-include src="'...
0
votes
1answer
15 views

Have problem with webpack autoprefixer , didn`t add -webkit- to animation css?

I have a problem. I can not add some prefixes '-webkit' to animations css and other. But to flex are added -'ms'. Maybe the problem is in the list of browsers, const autoprefixerOptions = { ...
2
votes
0answers
15 views

react webpack build error: Range out of order in character class - component package breaks build due to styles

I can't load imported css / scss styles from 3rd party packages or cdn links. The styles load fine locally, but when I run a build webpack -p --mode production the entire app breaks and I get an ...
3
votes
2answers
49 views

Webpack mode & loader issue

I am learning to set up my own webpack and I encountered a few curious issues. Here is my webpack.development.config.js: const path = require('path'); const CleanWebpackPlugin = require('clean-...
0
votes
1answer
10 views

Using mjs in the project of Next.js

When I use mjs in my project of Next.js, I meet the error below: Can't reexport the named export 'getLastPosition' from non EcmaScript module (only default export is available) ModuleDependencyError: ...
0
votes
1answer
20 views

Adding plugins to webpack breaks it

I use webpack 3.5.6 and I am trying to use the following plugin: https://www.npmjs.com/package/copy-webpack-plugin So here is my webpack code: var path = require("path"); var DIST_DIR = path....
0
votes
0answers
21 views

cannot add a plugin to webpack config file

I am trying to add a plugin for generating robots.txt to my project: https://www.npmjs.com/package/robotstxt-webpack-plugin Here is my current webpack config set up: var path = require("path"); var ...
0
votes
1answer
22 views

My webpack.config.prod.js file not generating bundle.js file

I have configured a webpack.config.prod.js file. I had a old version of webpack 3 where i used ExtractTextPlugin. I upgraded to webpack 4 where it tells me that ExtractTextPlugin is deprecated. I ...
0
votes
0answers
31 views

asp.net core 2.2 Webpack 4 React not starting correctly

I Can not figure out why when I simply run npm start from command line, project starts up and everything seems to be working fine.. But If I am trying to start it on IIS from Visual Studio it ...
2
votes
0answers
70 views

unable to import react component from library

After going through almost all the answers related to this topic I had no luck so have to create a new question. Problem Statement : I have a library of components (module) that I want to import ...
1
vote
1answer
10 views

Purpose of setting two environment variables in Webpack

What does it mean if you set two environment variables in Webpack? For example dev and build variables here. package.json "scripts": { "build": "webpack --env dev && webpack --env build &...
0
votes
1answer
19 views

Webpack 4 common code problem with Bootstrap 4

I have 2 TypeScript files, file1.ts and file2.ts. In file1.ts and file2,ts, I have - import * as $ from "jquery"; import 'popper.js/dist/umd/popper.min.js'; import 'bootstrap/dist/js/bootstrap.min.js'...
1
vote
0answers
12 views

Simulating Rollup’s preserveModules in Webpack 4

I am authoring an ES2015 library that I want to be tree-shakable. Can I simulate Rollup’s preserveModules option in Webpack 4 by including all my library source code files as Webpack’s entries (e.g. ...
0
votes
1answer
17 views

Webpack output only creates dist folder not dist.zip

I'm new to webpack. I'm trying to build my Vue webpack cli project. when done the dist folder is created successfully. but I need to have a dist.zip folder which needs to be passed in the CICD ...
0
votes
0answers
13 views

create script with webpack, to wrap as string in a variable

I have a JS script which I want to "copy/paste" in another script. For example, my original script is: index.js function doSomethingWithData(data) { console.log(data) } function getData(url) { ...
0
votes
0answers
14 views

Enabling Tree Shaking With Webpack4

I am attempting to convert my code to ES6 so that I can utilize the Tree Shaking benefit of Webpack4. Currently I only use Import statments except in one place where I use require. I am compiling ...
0
votes
0answers
25 views

How to fix continuous __webpack_hmr calls in Angular?

I have an application on .NetCore + Angular, It is build using webpack. There is no angular cli. On deployment to production, I am getting continous network calls by __webpack_hmr. I have deployed ...
1
vote
1answer
35 views

Webpack multiple configuration fails

I'm trying to use two configurations with webpack, but it fails in any way that I try, I allways get this message: TypeError: Cannot read property 'tap' of undefined In the docs, it says that it ...
0
votes
0answers
12 views

Stats data: tell modules imported by project from the one imported by webpack

Webpack's stats data provides a module property listing all the modules processed during the bundling phase. Among them are also listed the runtime packages automatically included by webpack needed ...
0
votes
0answers
12 views

Loading bundled react component with scriptjs and render on the screen

I have bundled my react component using web-pack and following is the webpack.config.js file I had used to accomplish the same var path = require("path"); var HtmlWebpackPlugin = require("html-...
0
votes
1answer
26 views

Quasar v1 tree shaking using webpack 4 and laravel-mix

I am building a fullstack app using laravel and vue. I want to integrate quasar as a front end framework. I am using laravel mix to build the assets. I was wondering how I could tree shake quasar ...
0
votes
1answer
12 views

react-toolbox dependences: Uncaught TypeError: Cannot read property 'string' of undefined

i trying to use react-toolbox with webpack 4 and react 16 but i have a problem loading react-toolbox dependences, they can not require prop-types, though it exist in node_modules: i getting the error: ...
0
votes
0answers
22 views

Is there a way to combine all .css and .js file into a single chunk using webpack 4?

It looks like there is no way to disable SplitChunksPlugin or make it produce a single all-included .js file.
0
votes
0answers
11 views

How do I create multiple externals list(one per cache group) in Webpack?

Each of my cache groups needs to have a different externals list. This is a requirement due to having to load different pre-built libraries for different pages, and is not the question here. Sometimes ...
0
votes
0answers
5 views

Webpack hooks with multiple OS

Our development team is on both Windows and Linux. I have created a webpack 4 plugin using compiler hooks that works only on Linux machines. Is there a way to detect OS so I can write an alternate ...
0
votes
0answers
6 views

Webpack 4 split chunks auto generated name length

I am having an issue were the auto generated name for my largest bundle is getting truncated at around 120 chars. I need the full name to work with my plug in to auto insert the bundles into my ...
-1
votes
0answers
10 views

Is there a way to disable bundling for Karma tests in Angular?

I'm working on a big Angular project that has more than 4000 Unit Tests. Starting the tests takes round about 100 - 120 seconds before the first test begins to run. Presently, we use Karma and Jasmine ...
1
vote
0answers
23 views

npm package not being bundle correct with webpack

I'm attempting to use the file-icon node_module inside of a project where I am using electron & webpack. When I use the package in a simple js file the module works fine (no bundler): my-file.js ...