Stack Overflow
Stack Overflow

Questions tagged [webpack-4]

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

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

Webpack 4 Big changes:

  • 4 is no longer supported.
  • configuration modes (--mode): production or development
  • configuration updates (plugins substitution by optimization config.)
    • NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors
    • ModuleConcatenationPlugin -> optimization.concatenateModules
    • NamedModulesPlugin -> optimization.namedModules
    • CommonsChunkPlugin was removed -> optimization.splitChunks, optimization.runtimeChunk
  • native support
    • add type: "javascript/auto" when transforming JSON via loader to JS

Links

1410 questions
123
votes
6 answers

Webpack 4 - How to configure minimize?

Webpack 4 comes with the following statement: Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. Fair enough, but I cannot find any information about configuring the UglifyJsPlugin instance…
csvan
  • 8,782
  • 12
  • 48
  • 91
90
votes
8 answers

Webpack 4 - create vendor chunk

In a webpack 3 configuration I would use the code below to create separate vendor.js chunk: entry: { client: ['./client.js'], vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], }, output: { filename:…
Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
85
votes
14 answers

Can't import SVG into Next.js

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…
Shifut Hossain
  • 1,599
  • 3
  • 14
  • 24
74
votes
14 answers

Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

I was trying to run webpack-4 first time webpack ./src/js/app.js ./dist/app.bundle.js it shows warning / error : WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option…
Sabir Hussain
  • 2,802
  • 2
  • 14
  • 19
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…
Erik Bender
  • 755
  • 1
  • 6
  • 13
53
votes
2 answers

Getting Error from webpack-cli: "TypeError: merge is not a function" in webpack config

I'm using webpack-merge to combine two webpack.config files together but I keep getting the error "TypeError: merge is not a function when I run the command "webpack --config ./config/webpack.config.prod.js" Has anybody else run across this…
Baby Coder
  • 759
  • 1
  • 7
  • 14
53
votes
4 answers

Get current `--mode` in webpack.config.js

How can I get the current --mode specified in package.json inside webpack.config.js? (For instance, for pushing some plugins.) package.json "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" } What I did in…
xAoc
  • 3,448
  • 3
  • 23
  • 36
42
votes
4 answers

Webpack 4. Compile scss to separate css file

Im trying to compile scss into a separate css file with no luck. As it is now the css gets into the bundle.js together with all js code. How can i separate my css into its own file? This is how my config looks: var path =…
fortyfiveknots
  • 423
  • 1
  • 4
  • 5
41
votes
2 answers

How to generate dynamic import chunk name in Webpack

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…
Jameel Moideen
  • 7,542
  • 12
  • 51
  • 79
37
votes
7 answers

Webpack: After installing webpack and webpack-cli still getting error when running webpack

I have the latest versions of webpack installed: "webpack": "^4.0.0", "webpack-cli": "^2.0.9" Yet when I run webpack in the terminal I get the following: The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition…
Taylor Austin
  • 5,407
  • 15
  • 58
  • 103
36
votes
2 answers

Do I ever need explicit allowSyntheticDefaultImports if esModuleInterop is true configuring TypeScript transpilation?

I need confirmation on the following theory. According to TS docs, there are two options that can be set in tsconfig.json. --allowSyntheticDefaultImports: Allow default imports from modules with no default export. This does not affect code emit,…
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
34
votes
2 answers

Cannot re-export a type when using the --isolatedModules with TS 3.2.2

I probably need to rethink the way we structure our React components. We are using the latest react-scripts that allow Typescript to be used and by default, the isolatedModules is being enabled which currently bugs me a bit. We used to structure a…
lumio
  • 7,428
  • 4
  • 40
  • 56
32
votes
6 answers

How to dynamically import SVG and render it inline

I have a function that takes some arguments and renders an SVG. I want to dynamically import that svg based on the name passed to the function. It looks like this: import React from 'react'; export default async ({name, size = 16, color = '#000'})…
Majoren
  • 983
  • 5
  • 16
  • 36
32
votes
6 answers

Issues with getting started with webpack 4

I am following the tutorial exactly as given here . But I am amazed that the docs seems outdated. e.g npx webpack src/index.js dist/bundle.js fails with: The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition…
sakhunzai
  • 13,900
  • 23
  • 98
  • 159
31
votes
1 answer

Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks

I've the follow example configuration to use mini-css-extract-plugin with Webpack 4: entry: { a: ['./js/a.js', './scss/a.scss'], b: ['./js/b.js', './scss/b.scss'] }, module: { rules: [ [...], { test:…
Andrea Moraglia
  • 505
  • 2
  • 5
  • 9
1
2 3
…
93 94