The Main Files

Everything you need to know about the most important files.

package.json

Contains general package information, the scripts which can be run via terminal and all npm (dev)-dependencies. Run can also edit the browserlist optimize for certain browsers.

webpack.common.js

Contains all common settings, used for webpack.dev.js, webpack.prod.js and webpack.purge.js.

Plugins

  • SVGSpritemapPlugin: This webpack plugin generates a single SVG spritemap containing multiple <symbol> elements from all .svg files in a directory. In addition, it can optimize the output and can also generate a stylesheet containing the sprites to be used directly from CSS.
  • babel-loader: This package allows transpiling JavaScript files using Babel and webpack.
  • style-loader: Inject CSS into the DOM
  • css-loader: The css-loader interprets @import and url() like import/require() and will resolve them.
  • file-loader: The file-loader resolves import/require() on a file into a url and emits the file into the output directory.

webpack.dev.js

This webpack script will be called in development mode. Simply run npm start in terminal. By default the script runs under https://localhost:3000. You can also set this to a proxy (see comment below).

Plugins

  • CleanWebpackPlugin: Automatically clean assets folder in public
  • MiniCssExtractPlugin: This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
  • BrowserSyncPlugin: Easily use BrowserSync in your Webpack project.
  • autoprefixer: Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.
  • file-loader:: The file-loader resolves import/require() on a file into a url and emits the file into the output directory.
  • css-loader: The css-loader interprets @import and url() like import/require() and will resolve them.
  • postcss-loader: Loader to process CSS with PostCSS.
  • sass-loader: Loads a Sass/SCSS file and compiles it to CSS.

webpack.prod.js

This webpack script will be called in production mode. Simply run npm run build in terminal. In this mode your app.css and app.js will be minified. Also all of your favicons will be generated. Please make sure, that all of the favicon settings are correct.

Plugins

  • CleanWebpackPlugin: Automatically clean assets folder in public
  • MiniCssExtractPlugin: This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
  • OptimizeCssAssetsPlugin: A Webpack plugin to optimize/minimize CSS assets.
  • TerserPlugin: This plugin uses terser to minify your JavaScript.
  • FaviconsWebpackPlugin: Leverages on favicons to automatically generate your favicons for you.
  • autoprefixer: Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.
  • file-loader: The file-loader resolves import/require() on a file into a url and emits the file into the output directory.
  • css-loader: The css-loader interprets @import and url() like import/require() and will resolve them.
  • postcss-loader: Loader to process CSS with PostCSS.
  • sass-loader: Loads a Sass/SCSS file and compiles it to CSS.

webpack.purge.js

This webpack script will be called after running the production mode. This script further reduces the file size of app.css by looking for all CSS classes used and writing only those to app.css. Please note that this may require adjustments in postcss.config.js. To run the purge script, simply run npm run build in terminal.

Plugins

  • MiniCssExtractPlugin: This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
  • OptimizeCssAssetsPlugin: A Webpack plugin to optimize/minimize CSS assets.
  • TerserPlugin: This plugin uses terser to minify your JavaScript.
  • file-loader: The file-loader resolves import/require() on a file into a url and emits the file into the output directory.
  • css-loader: The css-loader interprets @import and url() like import/require() and will resolve them.
  • postcss-loader: Loader to process CSS with PostCSS.
  • sass-loader: Loads a Sass/SCSS file and compiles it to CSS.

Terminal

The production script can be called in terminal via npm run purge.

postcss.config.js

As explained in the section above, there is an option to further reduce the file size of app.css. This file is used for this purpose.

The necessary steps

  • Specify the folders where the script should search for CSS classes
  • Possibly define a whitelist for CSS classes that should be saved in any case.
  • Possibly define a whitelist pattern for CSS classes that should be saved in any case.

app.js

This is one of the most important files. For example, all the package.json dependencies that are required for the functionality of the website are being loaded in this file. You can also add custom components and assets like images.

app.scss

This is the second most important file. In imports all of the specified SASS files in the subfolders.

_settings.scss

This is the main point of contact when it comes to changing basic website settings. You can find pretty much everything here.