Using Webpack

• You can’t use a library that isn’t installed

• Webpack and related libraries installed via NPM

• Webpack almost always needs additional libraries to work:

  • Babel for ES6 or React

  • TSC for TypeScript,

  • Etc.

• Required packages are recorded in package.json

• Once installed, these tools are configured to work together via webpack.config.json

• Installing Webpack can be tricky as we must get the correct version

• Install as webpack@*, where * is the version you want

• Full source: https://github.com/danielstern/webpack-examplar

• Install Webpack via npm

• Verify selected version

• Save to package.json

• Create npm script to invoke webpack

• Webpack will be accessible via command line

•Configured via webpack.config.json

•Wide variety of options:

•Input files

•Output files

•Libraries to use while transforming code

•Transformation options

•Documentation available at https://webpack.js.org/

•No one regardless of skill level finishes a webpack project without referring to the documentation or Stack Overflow at least once

Input Files

•You write ‘em

•Always committed to Git, etc.

•JSX, CSS, HTML, YAML, PNG – any file type you can think of

•Usually located in
src or app folders

Output Files

•Weback generates ‘em

•Usually not committed

•Outputs as a single JavaScript file – what could be simpler?

•Usually output to bin or dist folders

•Create webpack.config.json

•Add minimal configuration

• Mode

• Target

• Entry

• Output

•Create “hello world” application

•A tool commonly used by developers to work on Webpack projects

•Bundles code automatically in response to file changes

•Opens browser automatically

•Refreshes browser automatically when code is changed

•Saves time vs. manual reloading

•Update package.json to include webpack serve

•Run webpack in serve mode

•Verify application opens and reloads automatically

•JSX is powerful language used in conjunction with React

•JSX must be transformed into JavaScript before we can use it in the browser

•Several additional tools needed:

•babel & associated plugins

•Loader for JSX files

What is Babel?

•Configurable tool used to transform one language to another

•Most commonly used to transform ES6 and JSX in ES5

•Can be used without Webpack

•However, lacks the ability to “bundle” files together

•Install dependencies:

•Create “hello JSX” file with minimal React code

•Configure Webpack to use Babel when loading JSX files

•JavaScript code is not the only thing that can be bundled
by Webpack

•Styles (as CSS, LESS, etc.) can all be added to bundle

•css-loader tool and several others are used

•Webpack can embed CSS into the generated output file

•LESS or SASS can be automatically transformed as part of the same step

•Controlled / automatic scoping

•Compile-time error checking

•Automatic browser hot reload

•Update Webpack config with appropriate loader

•Loader and rule to handle .css files

•Import CSS file in our main JSX file

•Write basic CSS and verify that it is working

•.json / .yml / .csv for config

•.png / .jpg / .gif for pictures

•.css / .less / .sass for styles

•Create a YAML file with configuration for our game

•A file container words separated by category, i.e., science, nature

•Install YAML loader with NPM

•Configure Webpack to load YAML with loader

•Import and integrate the file into our application

•We will create the game Hangman for the browser

•Applications view will be handled by React

•Styles written with CSS and loaded with Webpack

•Configuration in YAML or JSON file

In this demo we build a real HTML / React application on top of our Webpack scaffold.

•Webpack bundles input files into a single output file

•Webpack uses loaders to "learn" how to bundle additional files

•Configuration is located in webpack.config.js

•Webpack and plugins installed via NPM

•Webpack is configured via webpack.config.json

•Style loader is used in conjunction with Webpack to load CSS and other styles

•Styles are imported directly into JS files

•Babel is used with Webpack to transform React applications

•Webpack Dev Server is used to automate development of Webpack apps