#Summary:
-
We wrap 3 entries: app, tools and vendors. These point to the files they will be bundling so to speak the entries to your React app, a separate app that will contain your development tools for Redux and a vendors file that contains the vendors necessary to run the app (ReactJS, Redux, etc.). (line 6 to 17)
-
We define that the output path should go to a /build/ folder and that each output file should have the name of the key you defined for it in the the entry object ([name].js). The same applies to the source-maps. (line 18 to 23)
-
We define that the output stats of WebPack should be coloured and the reasons should also be outputted. “Reasons” are reasons why a module is included. (line 24 to 27)
-
We enable debug, which is the same as running WebPack with the cli option “-d”. It will run webpack in development mode. (line 28)
-
We put devtools to eval-source-maps. Other options could be: eval, source-map or inline-source-map. Eval runs the fastest since it does not include source-maps, but for development purposes source-maps are of great importance. They map the obfuscated code to the original code. (line 29)
-
We define the configuration of the plugins that the loaders will use. However plugins can also be stand-alone and just run a single task, more often than not they are linked to a loader. (line 30 to 46) Now we define the process each module that is referenced will go through before it’s a valid WebPack module. These loaders will create modules from the files referenced as imports in the Javascript. For instance: it will parse SCSS, create a CSS reference module and either import it as a style-tag on the page or export it as a file based on the directory (line 55 to 102)
-
After that follows some basic WebPack configuration. This is purely by choice, if you don’t want linting remove these rules.