Exercises

Exercise 1 - Setting up Webpack

Step 1 - Create a new empty folder for the project

mkdir webpack-exercises
cd webpack-exercises
git init
npm init

Go to http://gitignore.io and create a gitignore file. You need to add "node".

After creating a gitignore file commit the files to your new project

Step 2 - Setting up an empty webpack build

Webpack is used for bundeling all your source files into a single javascript bundle. That way you wont have to include each one of them manually in the HTML file.

By default webpack tries to parse the file ./src/index.js . So start of by creating an empty src-folder and then add a file called index.js .

mkdir src
touch src/index.js
echo "console.log('test')" > src/index.js
npm i --save-dev webpack webpack-cli
webpack

Webpack should automatically have created a folder called "dist" with the output

Step 3 - html-webpack-plugin

html-webpack-plugin can automatically gennerate a html file for you

npm i --save-dev html-webpack-plugin

Then lets create a config file for webpack called "webpack.config.js" and add the plugin.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

When you rebuild the project next time you should get two files out. One JS file and one automatically gennerated HTML file. Try opening up the html file in your browser and see how it looks.

Exercise 2 - Creating a custom Loader