Webpack Template

A simple & organized Webpack template for beginners

How to install

1. Install Node.js
2. Open your editor and the webpack template folder in the terminal
3. Install all the dependencies by running npm install
4. Develop with npm run dev
5. Build for production with npm run build (default output in dist/, can be modified in webpack.common.js)

Options enabled

• Transpiling
• Cache Breaker
• Automatic clear dist/
• Sourcemaps
• Dev server
• Hot reload

Basic modules installed

• webpack & webpack-cli
• webpack-merge
• copy-webpack-plugin
• mini-css-extract-plugin
• webpack-dev-server
• clean-webpack-plugin
• babel
• file-loader
• html-loader
• style-loader
• stylus
• stylus-loader
• css-loader
• three.js

Install new modules

• Choose your module at NPM
• Using the terminal in your webpack folder, run npm i -D [npm_module_name]

Recommendations

Visual Studio Code

• Use VS Code as your main editor
• Install language-stylus extension

npm-check

• Install npm-check to check for outdated (updates), incorrect, and unused dependencies by running npm install -g npm-check
• Use it with npm-check
• Update dependencies with npm-check -u (and choose the dependency to update) or npm-check -y (updates all dependencies)

Congrats!

You have your very first Webpack Template.