webpack-workshop
Set up
Clone the repo:
git clone https://github.com/bencoveney/webpack-workshop.git
cd webpack-workshop
Install dependencies:
npm install
Running the build
Run the dev build (in watch mode):
npm run dev
Run the production build:
npm run prod
Debugging
Run this from your console:
node --inspect-brk ./node_modules/webpack/bin/webpack.js
- Navigate to chrome://inspect.
- Click inspect on your node process.
- In the sources tab, add your project folder. This will allow you to put breakpoints in files. You should only need to do this step once.
Ideas
-
Loader (Easy) - Pass a colour as an option to
text-loader
and colour the emitted text. -
Loader (Middle) - Extend the
text-loader
to support markdown. -
Loader (Hard) - Create a loader that takes a JSON file as input and generates JavaScript based on the JSON data.
-
Loader (Hard) - Re-implement a loader from https://webpack.js.org/loaders/
-
Plugin (Easy) - Add a reassuring message if the build fails.
-
Plugin (Easy) - Extend the
good-job-loader
to accept additional messages as an option. -
Plugin (Middle) - Create a plugin that inserts the current time as a comment into the output bundle.
-
Plugin (Hard) - Create a plugin that inserts the current git commit as a comment into the output bundle.
-
Plugin (Hard) - Re-implement a plugin from https://webpack.js.org/plugins