Ability to set up a Node.js environment. Familiarity with ES6 syntax and features. Basic knowledge of JavaScript and programming. I also recommend checking it out if you're familiar with webpack 4 but want to see a webpack 5 setup. In addition to this article, I've created an extremely solid webpack 5 Boilerplate to get you started with any project. Like all things, once you delve in and learn it you realize it's not that scary and there's just a few main concepts to learn to get set up. If you don't feel comfortable setting up webpack from scratch for use with Babel, TypeScript, Sass, React, or Vue, or don't know why you might want to use webpack, then this is the perfect article for you. I felt safe using something like create-react-app to set up a project, but I avoided webpack if at all possible since it seemed complex and confusing. Let me show the second and the third approach.Webpack used to be a frustrating and overwhelming beast to me. Then you’ll be able to open the the required file and put a breakpoint there. Run Webpack till the end one time and then the inspector will load and keep all the files used during previous execution. Besides, the file could easily be outside the node_modules. But often multiple packages are used so you don't know which packages to upload and uploading entire node_modules folder isn't feasible. 
When you know you debug just one package, it's easy to find it and upload it. That's probably the most convenient option, but it doesn't always solve the problem. Upload Webpack files manually from the file system.
#How to run webpack build code
That's the least convenient option because you'll need to clean these statements but I still sometimes use this approach when I have source code open and want to get to this point without extra hassle.
Put a debugger statement in the Compilation class constructor in the sources. Now we need to access Compilation class in the node_modules/webpack/lib/Compilation.js file but it won’t be available since Chrome haven’t yet loaded it. One you click on it, this will open a standalone Chrome debugging tools and stop on the first statement: Sometimes it takes a few seconds for the entry to appear, so give it a little time. Compilation errorsĪnd click on inspect in the Remote Target section: But as we will see soon it’s not really possible to do that for webpack in its current implementation and so as I understand it relies on an author of a plugin to provide all the required error details to troubleshoot the problem. It’d be nice if webpack provided at least the file name where the error occurred. It’s not even clear where to start the debugging. the file toinspect.txt is not only used in the plugin but is also required by a bunch of JS files in the bundle. 
you have 10+ plugins configured and some of them use toinspect.txt file. the less descriptive error like the one we’ve seen in the introduction. It might be easy to realize that the error is in the HelloWorldCheckerPlugin. Plugins : [ new HelloWorldCheckerPlugin ( Īnd when you run the webpack and you get the unspecified error: HelloWorldCheckerPlugin const path = require ( 'path' ) Copy const HelloWorldCheckerPlugin = require ( './plugin' ). It worked extremely well for me when I was trying to configure ngtools/webpack AOT plugin to be used outside of angular-cli. It’s a very useful technique that potentially can save you days of the effort. This article will show a simple way to very quickly identify the culprit for the error. That’s very time consuming and inefficient. You’d have to remove plugins one by one to identify the plugin that causes the error. Debugging this error can literally take days if you don’t know where to look. 
Webpack does its job and reports the error, but doesn’t give you any clue as to where exactly this error comes from. And so I often ended up with the following unspecified errors: However, the big obstacle is that at the moment, Webpack doesn’t exactly tell you where the error occurs. Of course this is part of the learning process and shouldn’t be a big problem by itself. As it currently stands most of the plugins lack good documentation which inevitably leads to misconfiguration and consequently build time errors. Recently I’ve been hooking up numerous plugins to our Webpack based build system.
0 kommentar(er)
