Stack Overflow
Stack Overflow

Questions tagged [webpack-2]

Use this tag for questions specific to features in Webpack 2. When using this tag, also include the more generic [webpack] tag where possible.

Use this tag for questions specific to features in Webpack 2. For general Webpack questions, the correct tag is .

Webpack 2

Released in February 2016. Migrating instructions can be found in the documentation.

New Features

  • Tree Shaking (removal of unused code)
  • Expanded flexibility and configuration for loaders
  • Performance Budgets (highlight bundles that exceed 250kb in size)
1438 questions
337
votes
43 answers

Field 'browser' doesn't contain a valid alias configuration

I've started using webpack2 (to be precise, v2.3.2) and after re-creating my config I keep running into an issue I can't seem to solve I get (sorry in advance for ugly dump): ERROR in ./src/main.js Module not found: Error: Can't resolve…
Matthew Herbst
  • 29,477
  • 23
  • 85
  • 128
245
votes
27 answers

Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type

I am trying to import components from react-materialize as - import {Navbar, NavItem} from 'react-materialize'; But when the webpack is compiling my .tsx it throws an error for the above as - ERROR in ./src/common/navbar.tsx (3,31): error TS7016:…
Joy
  • 6,438
  • 8
  • 44
  • 75
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
107
votes
9 answers

Testing with Jest and Webpack aliases

I am looking to be able to use webpack aliases to resolve imports when using jest, and optimally, reference the webpack.aliases to avoid duplication. Jest conf: "jest": { "modulePaths": ["src"], "moduleDirectories": ["node_modules"], …
speak
  • 5,202
  • 4
  • 36
  • 41
76
votes
5 answers

Output an ES module using webpack

With Rollup I can output an ES module by simply setting the format option to 'es'. How can I do the same with webpack? If it's not possible now, does webpack have any plans to add it? The only thing I've found in the documentation for…
Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
62
votes
7 answers

How to pass .env file variables to webpack config?

I am new to webpack and worked out almost all build sections, but now the problem is that I want to pass the environment variables from a .env file to webpack config, so that I can pass that variables to my build files via webpack.DefinePlugin…
ninja dev
  • 1,687
  • 2
  • 12
  • 12
50
votes
3 answers

Sourcemaps are detected in chrome but original source is not loaded, using webpack-2

When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded. I'm using webpack beta21. These files used to be detected automatically, ie when a breakpoint was put in the the output…
Nikos
  • 7,295
  • 7
  • 52
  • 88
49
votes
4 answers

DevTools failed to parse SourceMap

I am trying to get my Webpack project to have a source map file. I finally got the settings right so that it would do that, but now I am getting this error: DevTools failed to parse SourceMap: http://MyServer/MyApp/bundle.js.map I go to the URL…
Vaccano
  • 78,325
  • 149
  • 468
  • 850
48
votes
6 answers

Ignore or prevent ESLint errors from breaking the build in a React project (create-react-project)

I've recently created a project with create-react-project. The problem is that, while I'm developing, every time there's a problem with ESLint, the build breaks and doesn't compile the code. Can I keep the build running while still having ESLint…
R01010010
  • 5,670
  • 11
  • 47
  • 77
48
votes
1 answer

How to write Webpack plugin which adds modules to the bundle on the fly based on other modules?

I have a problem with writing a Webpack plugin for a translation service. The goal is to: Get names (and source code) of all required modules during compilation. I need to be able to scan the included source code for special t() function usage but…
Maciej Bukowski
  • 3,240
  • 23
  • 28
47
votes
2 answers

When do I use 'use' and 'loader' in Webpack 2 module.rules?

I am upgrading my current project to Webpack2, which it was using Webpack1 prior. I have looked into a couple tutorials about upgrading and in general, I do understand. The issue I keep running into, though, is I'm not sure when to use 'use' and…
TwistedSt
  • 632
  • 1
  • 6
  • 14
46
votes
5 answers

Code splitting causes chunks to fail to load after new deployment for SPA

I have a single page app that I code split on each route. When I deploy a new version of my app the users will usually get an error if a user still has the page open and visits a route they haven't visited before. Another scenario where this can…
Kenneth Truong
  • 3,882
  • 3
  • 28
  • 47
45
votes
9 answers

Webpack Installing Bootstrap - missing popper.js.map

I followed the instructions in https://getbootstrap.com/docs/4.0/getting-started/webpack/ and I also installed jquery and popper.js with npm. Still when I use the output bundle.js, the browser keeps on sending GET requests for popper.js.map and I…
yoni.str
  • 451
  • 1
  • 4
  • 3
43
votes
10 answers

React bootstrap not styling my react components

Just started out using React yesterday so setting up a demo app. Environment is: Typescript Webpack React & React DOM I'm trying to setup Bootstrap styles. I followed this tutorial along but modified it to suit Typescript:…
Richard G
  • 5,243
  • 11
  • 53
  • 95
1
2 3
…
95 96