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
20
votes
4 answers

Webpack 4 and react loadable does not seems to create correct chunk for server side rendering

I am trying to create an ssr react app with lazy loading import. Everything works fine except it does not fetch all the required chunks. I am also wondering if this is related to a dynamic component, which is base on server response Edit - It…
fiddlest
  • 1,262
  • 2
  • 17
  • 42
20
votes
2 answers

webpack 4 disable uglifyjs-webpack-plugin

I have had this problem for the last 2 days. So I decided to completely disable uglifyjs-webpack-plugin from webpack build process. I was not able to find anything on webpack 4.
yacine benzmane
  • 3,888
  • 4
  • 22
  • 32
20
votes
1 answer

How to remove unused CSS using webpack 4?

I am having problem removing unused CSS in webpack 4. It seems that most of the CSS purification plugins are dependent on extract text plugin which is not updated for version 4. Here's my commands: node_modules/.bin/webpack --mode=development…
Hamed
  • 1,351
  • 9
  • 23
20
votes
2 answers

Can I use NODE_ENV="staging" with mode="production" in webpack 4?

My app use NODE_ENV for deciding which api server should request to. NODE_ENV="production" => https://api.***/ NODE_ENV="staging" => https://api.staging-***/ NODE_ENV="development" => http://localhost:3000/ I want to build staging bundle with…
Fumiya Karasawa
  • 483
  • 1
  • 5
  • 9
19
votes
2 answers

TypeError: compiler.plugin is not a function at ReactLoadablePlugin.apply

I want to implement SSR in ReactJs using React Loadable by Webpack. Below are a few lines from the package.json file: const { ReactLoadablePlugin } = require('react-loadable/webpack'); plugins:[ new ReactLoadablePlugin({ filename:…
Sam
  • 191
  • 1
  • 1
  • 4
19
votes
4 answers

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: app.js:9 Uncaught TypeError: __webpack_require__(...).context is not a function at…
webprogrammer
  • 2,393
  • 3
  • 21
  • 27
19
votes
3 answers

How to print effective webpack build config to the console?

I have a complex webpack config setup (merge of dynamic settings over multiple config files) and I would like to see what is the final config that webpack uses, i.e. the result of the merge of all of those and the default settings. How can this be…
jakub.g
  • 38,512
  • 12
  • 92
  • 130
18
votes
3 answers

Unknown "encore_entry_link_tags" function when using Webpack Encore ^0.21.0

I would like to use the new version of Webpack encore to have access to all the new features it offers. however after following the steps in the official guide I can't make it to work and I get Unknown "encore_entry_link_tags" function What I…
113408
  • 3,364
  • 6
  • 27
  • 54
18
votes
2 answers

Webpack 4 - Sourcemaps

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…
kimsagro
  • 15,513
  • 17
  • 54
  • 69
17
votes
3 answers

How to fix Uncaught DOMException: Failed to execute 'pushState' on 'History'

I have this little app that works fine in development mode with webpack-dev-server, but when I use the bundled files from the dist folder generated by the production mode, all I get in the browser is this error: Uncaught DOMException: Failed to…
code_dude
  • 951
  • 2
  • 15
  • 28
17
votes
2 answers

Configuring Cypress, cypress-react-unit-test, and React

I want to test our React components independently using the package cypress-react-unit-test. After several days, I have been unable to get it to work with the existing React Webpack configuration. I get the error: TypeError: path argument is…
Aaron
  • 343
  • 1
  • 8
17
votes
1 answer

MiniCssExtractPlugin public path not working

I am using MiniCssExtractPlugin to lazyload CSS files in my React application. I have given publicPath option for MiniCssExtractPlugin but it is not taking this option value, it is taking output.publicPath option. config: { test: /\.(css)?$/, …
Nithish
  • 369
  • 1
  • 8
  • 20
17
votes
5 answers

Exclude certain module from a chunk webpack 4

How can I specify that I don't want a module in a chunk with webpack 4, let's suppose I don't want lodash in the vendor file (No matter the consequences), what can I do? This is the actual configuration: splitChunks: { name: 'vendors', …
Miguel
  • 1,577
  • 2
  • 15
  • 29
16
votes
4 answers

The 'mode' option has not been set, webpack will fallback to 'production' for this value.Field 'browser' doesn't contain a valid alias configuration

Project directory structure. Below are the webpack configuration files. webpack.config.client.js const path = require('path'); const webpack = require('webpack'); const CURRENT_WORKING_DIR = process.cwd(); const config = { name: 'browser', …
iCantFindaGoodUsername
  • 768
  • 1
  • 6
  • 22
16
votes
1 answer

Difference between publicPath and contentBase in webpack

I started using webpack and now confused between the publicPath and contentBase. The documentation isn't clear on the use case.
Nikhil
  • 665
  • 2
  • 11
  • 25
1 2
3
…
93 94