Tutorial by Examples

Prerequisites: NodeJS and npm There are two ways of installing Webpack: globally or per-project. It is best to have the dependency installed per-project, as this will allow you to use different versions of webpack for each project and don't require user to have installed webpack globally. Install...

Dependencies npm i -D webpack babel-loader webpack.config.js const path = require('path'); module.exports = { entry: { app: ['babel-polyfill', './src/'], }, output: { path: __dirname, filename: './dist/[name].js', }, resolve: { extensions: ['', '.js'], }...

Required modules npm install --save-dev webpack extract-text-webpack-plugin file-loader css-loader style-loader Folder structure . └── assets    ├── css     ├── images    └── js webpack.config.js const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webp...

The minimum required to use Webpack is the following command: webpack ./src/index.js ./dist/bundle.js // this is equivalent to: webpack source-file destination-file Web pack will take the source file, compile to the output destination and resolve any dependencies in the source files.

Ensure that you install the correct npm dependencies (babel decided to split itself into a bunch of packages, something to do with "peer dependencies"): npm install webpack webpack-node-externals babel-core babel-loader babel-preset-react babel-preset-latest --save webpack.config.js: mo...

Folder Structure . ├── lib ├── modules | ├── misc.js | ├── someFunctions.js ├── app.js ├── index.html ├── package.json ├── webpack.config.js └── webserver.js package.json { "name": "webpack-example-with-nodejs", "version": "1.0.0", ...