Questions tagged [webpack-3]

Version 3 of the Webpack bundler. Webpack takes modules with dependencies and generates static assets representing those modules.

About

Released in June 2017. Migrating from Webpack 2 to 3 should involve no effort beyond running the upgrade commands in your terminal.

New Features

  • Scope Hoisting
  • Dynamic Import Syntax

Links

GitHub

183 questions
195
votes
7 answers

Define global variable with webpack

Is it possible to define a global variable with webpack to result something like this: var myvar = {}; All of the examples I saw were using external file require("imports?$=jquery!./file.js")
Teneff
  • 30,564
  • 13
  • 72
  • 103
130
votes
8 answers

How to determine the installed webpack version

Especially during the transition from webpack v1 to v2, it would be important to programmatically determine what webpack version is installed, but I cannot seem to find the appropriate API.
doberkofler
  • 9,511
  • 18
  • 74
  • 126
58
votes
3 answers

webpack - Property context does not exist on type NodeRequire

I want to use: require.context('../images/', true, /\.(png|ico|svg|jpg|gif)$/) but I get the following error: Property context does not exist on type NodeRequire
Legends
  • 21,202
  • 16
  • 97
  • 123
55
votes
4 answers

Webpack 4 migration CommonsChunkPlugin

I need help migrating the following code from webpack 3 to 4. new webpack.optimize.CommonsChunkPlugin({ minChunks: module => module.context && module.context.indexOf("node_modules") !== -1, name: "vendor", chunks: ["main"] }) I have two…
24
votes
3 answers

Webpack - How to load non module scripts into global scope | window

so i have a few vendor files that i need to run from window scoped (it's a bunch of window scoped functions) plus i have some polyfills that i would like to bundle into the vendor bundle as well. So i tried something like this: new…
Mick Feller
  • 882
  • 1
  • 8
  • 16
22
votes
1 answer

How to set webpackChunkName for import() globally?

Since Webpack@3.0.0 we have this great feature which enables named chunk files: import( /* webpackChunkName: "my-chunk-name" */ /* webpackMode: "lazy-once" */ 'module' ); However, I'm at the point where I have 40 imports like this and…
van_folmert
  • 4,257
  • 10
  • 44
  • 89
21
votes
3 answers

How to fix modules with "ModuleConcatenation bailout: Module is not an ECMAScript module" bailout message?

Webpack3 comes with the ModuleConcatenation plugin that when used with the --display-optimization-bailout flag will give you the reason for bailout. The bailout messages not that easy to understand, and it's hard to understand why they happened to a…
fabiomcosta
  • 1,105
  • 1
  • 8
  • 10
17
votes
5 answers

Webpack can't load fonts (ttf)

Currently I have 3 fonts that I want to add to my React project:a, a light, a bold. My file structure: /src ├── /fonts/ │ ├── /A.ttf │ ├── /A-light.ttf │ └── /A-bold.ttf │ ├── /styles/ │ ├── /base/ │ │ └── /__base.scss │ └──…
greenN
  • 171
  • 1
  • 1
  • 4
15
votes
2 answers

Webpack devtool="(none)" breaks my code

I'm using webpack 3.10 and I've got different webpack configs for dev/prod. Now in my prod config "devtool = "(none)"" is set, while in my dev config it is "eval-source-map". Sadly using the prod config, my bundle is non functional. While using the…
Schadenn
  • 854
  • 1
  • 9
  • 20
15
votes
2 answers

webpack3 jshint-loader does not work

I'm trying to follow this instruction https://webpack.js.org/loaders/jshint-loader/ and get an error: My config file: const path = require('path'); module.exports = { entry: { app: './index.js' }, output: { …
Zorin
  • 211
  • 1
  • 2
  • 6
14
votes
1 answer

Module Build Failed. TypeError: this.getResolve is not a function

I am getting this error when compiling sass. webpack: 3.12.0, sass-loader: 8.0.0. Also, I use angular2. { test: /\.(scss|sass)$/, use: [ "to-string-loader", { loader: "css-loader", …
Israa Sulaiman
  • 143
  • 1
  • 1
  • 4
12
votes
1 answer

Webpack 3, Babel and Tree shaking not working

I'm trying to find a way to tree-shake my modules and use Babel with Webpack. If I take the example code from the webpack documentation (https://webpack.js.org/guides/tree-shaking/) and run it, the modules/functions/other exports that are not used…
Milanzor
  • 1,920
  • 14
  • 22
8
votes
0 answers

How can I get a list of all packages used in a webpack bundle?

I need to audit the list of node packages that are used in a webpack bundle. The corresponding webpack config file passes the list of production dependencies (ie the non-dev dependencies from the application's package.json) as the list of entry…
Prismatic
  • 3,338
  • 5
  • 36
  • 59
8
votes
2 answers

Webpack including unused exports in final bundle (not tree shaking)

I have a setup where a library's index.js (main entry point) exports everything in the lib... so its setup like this: export * from "./mod1" export * from "./mod2" // etc... (take a look) When I import 1 of the exported libraries from that entry…
Paul T.
  • 608
  • 1
  • 6
  • 11
8
votes
1 answer

Performance issue with PrimeNG TurboTable

I am using PrimeNG TurboTable with nested rows.While loading data to the TurboTable getting serious performance issues,like the rendering takes around 30 seconds and it takes more than 10 seconds to become stable,data is loaded from the server, and…
Vignesh
  • 2,378
  • 3
  • 25
  • 48
1
2 3
12 13