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
0
votes
1 answer

content does not change using HotModuleReplacementPlugin

First problem : Trying HMR example given in webpack documentation in this link : https://webpack.js.org/guides/hot-module-replacement/. As mentioned in title : "Gotchas", i tried removing child which was added when app loads for the first time,…
0
votes
0 answers

Webpack 4 - Non NPM Vendor Directory

At the moment I'm trying to build a prototype of my idea, and bought a Bootstrap theme on Themeforest. Being a Frontend noob that I am, I can't seem to find concrete information how to produce vendor.js and vendor.css from the theme's provided…
Mickey
  • 501
  • 4
  • 8
0
votes
1 answer

Using local modules with Webpack 4 is bundling the same dependency multiple times

I am attempting to find a good way to use local modules in npm, or a way of structuring a large application so it can be bundled off into modules which may or may not be in a separate repository. Each local module has it's own package.json and…
Sam
  • 2,771
  • 2
  • 28
  • 41
0
votes
1 answer

Why is `window` undefined when running my Webpack plug-in after upgrading to Webpack 4?

I've written a plug-in for Webpack that takes my generated React component, renders it in Node, and then inserts it into the generated HTML document. This used to work fine in Webpack 3. To upgrade it to Webpack 4, I…
Vincent
  • 4,876
  • 3
  • 44
  • 55
0
votes
1 answer

How to use ProfilingPlugin with webpack-cli for webpack 4

webpack-cli provides the --plugin option but it seems it can not resolve the ProfilingPlugin. is there any way to use it directly through the cli options without creating a webpack config? node_modules/.bin/webpack --mode=production --progress…
user753676
0
votes
1 answer

loaderUtil.getOptions returns null: "this" object is empty in loader function for Webpack 4

I'm trying to create a custom loader in order to generate the manifest.json file for a chrome extension, and for some reason I can't get access to the "options" object via loaderUtils because this is an empty object... Is there something else I…
chez.mosey
  • 194
  • 1
  • 8
0
votes
0 answers

Migrating to Webpack, Module Not Found (can't resolve './style.css')

I'm migrating our AngularJS project from Gulp to Webpack. I'm following the docs to the letter but I keep getting this error: ERROR in ./src/js/index.js Module not found: Error: Can't resolve './style.css' in…
Edgar Quintero
  • 4,223
  • 2
  • 34
  • 37
0
votes
1 answer

Webpack compiles but can not get bundle.js files

I have upgraded to webpack 4. The webpack is compiling, but the scripts are not loading. login.html:89 GET http://localhost:4200/oms/ng1.bundle.js login.html:89 GET http://localhost:4200/oms/scripts-login.bundle.js Here is my webpack config…
Spikerr
  • 311
  • 1
  • 5
  • 16
0
votes
1 answer

html-webpack-plugin has no source file to refactor

I am in the process of upgrading from webpack 3 to 4. The html-webpack-plugin is encountering`enter code here ERROR in Must have a source file to refactor. Child html-webpack-plugin for "index.html": 1 asset Entrypoint html-webpack-plugin…
Spikerr
  • 311
  • 1
  • 5
  • 16
0
votes
1 answer

Clean Up Old Chunk Files in Webpack 4

I am using splitChunks to optimize my app, but after one chunk updates, the browser pulls down all assets because clean-webpack-plugin removes the entire dist folder, changing the requested If-Modified-Since. Is there any way to clean up just the…
ge022
  • 134
  • 1
  • 7
0
votes
1 answer

Disable webpack function mangling on specific files

I'm using webpack to bundle my angular app. One of the bundled files includes all the models required by the app, the models are defined using constructor functions. Webpack, through it's UglifyJS plugin, mangles my constructor function names which…
Niro
  • 314
  • 1
  • 4
  • 25
0
votes
1 answer

Web-Pack 4.0 : Not able to copy files after build

This is my config file and it is bundling and generating the build files in the desired 'dist' directory. But I want to copy it to some other location. The problem is that the copyWebPackPlugin is running a bit earlier before the build is…
Ambar Bhatnagar
  • 215
  • 1
  • 3
  • 9
0
votes
1 answer

How to force DLL plugin to share a library?

I'm using the webpack config below to generate a "DLL" bundle. What I can't figure out is why jquery-validate won't use the same copy of jquery from the same entry-point. The code that webpack generates for jquery-validate is this: /***/…
mpen
  • 272,448
  • 266
  • 850
  • 1,236
0
votes
1 answer

Unexpected token, expected ; body {

I want to load my css files. inside my component: import '../assets/home/css/style.css' I'm using 'style-loader', 'css-loader' but I got this error message: SyntaxError: /Users/sm_emamian/Desktop/react js/shadyab/app/assets/home/css/style.css:…
S.M_Emamian
  • 17,005
  • 37
  • 135
  • 254
0
votes
1 answer

Webpack4 not compile the webpack bootstrap code to es5?

the code of webpack4 bootstarp in development mode. /******/ (function(modules) { // webpackBootstrap ... /******/ function hotCreateRequire(moduleId) { /******/ var me = installedModules[moduleId]; /******/ if (!me)…
Zhendong
  • 99
  • 6
1 2 3
93
94