Pre-requisites

You will need

1. Node.js
2. npm package manager

Webpack installation will be included in the tutorial.

Starting directory structure

Assume we have a directory woofing-golden which contains the codes for your web app. If you haven’t got such directory, you can create one

mkdir woofing-golden
cd woofing-golden

Now inside the directory, run

npm init -y

This command will generate a package.json file which can be edited to your liking.

{
   "name": "woofing-golden",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "css-loader": "^0.28.7",
     "file-loader": "^1.1.6",
     "html-webpack-plugin": "^2.30.1",
     "style-loader": "^0.19.1",
     "webpack": "^3.10.0"
   },
   "dependencies": {
     "jquery": "2.1.1"
   }
 }

Your package.json can be edited by hand and by the npm command whenever you install a new package

A few rules about organization need to be defined before one moves on to configure webpack. I suggest the following rules

• src for script files
• assets for files such as images, fonts, etc.
• styles for css/sass files, etc.
• lib for additional library that cannot be installed automatically by node (for example jquery-ui with customized styles)
• dist for the output of webpack bundles
• node_modules for node packages. This folder will be accessed automatically by the package manager
• package.json is the configuration used by npm
• webpack.config.js is the configuration used by webpack

The directory structure should look something like this

woofing-golden
├── assets
│   └── gr.jpg
├── styles
│   └── main.css
├── dist
│   └── index.html
├── lib
│   └── jquery-ui-1.12.1
├── node_modules
│   ├── css-loader
│   ├── file-loader
│   ├── html-webpack-plugin
│   ├── jquery
│   ├── lodash
│   ├── style-loader
│   └── webpack
├── package.json
├── src
│   ├── index.js
│   └── print.js
└── webpack.cofig.js

Install the dependencies for development

npm install --save-dev webpack
npm install --save-dev css-loader style-loader file-loader

Install the dependencies of your package

npm install --save jquery-2.1.1
npm install --save lodash

Configure webpack

Update webpack.config.js

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

module.exports = {
    entry: {
        app: './src/index.js',
        thank: './src/thank.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output management'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    resolve: {
        alias: {
            jqueryui: path.resolve(__dirname, 'lib/jquery-ui-1.12.1'),
            assets: path.resolve(__dirname, 'assets'),
            styles: path.resolve(__dirname, 'styles')
        }
    }

}

Once everything is in place, you can build and access the app at dist/index.html

npm run build

You can also zip up the dist folder to publish your app.