Webpack - first experiences

devop |

webpack - bundle your [assets|scripts|images|styles]…

This post is a collection of my first webpack experiences. It shows how to

  • use the development server
  • add bootstrap
  • use JQuery
  • generate a QRCode
  • and a UUID.

The development server

If you choose webpack as part of your Javascript stack you most probably want to use the webpack-dev-server during development.

My preferred usage is With NPM Scripts. Add the following snippet to your package.json (or whatever command you prefer to use instead of start:dev).

"scripts": {
  "start:dev": "webpack-dev-server"
}

With this snippet in place your can install and run the development server from any shell:

$ npm install webpack-dev-server --save-dev
$ npm run start:dev
…
Project is running at http://localhost:8080/
webpack output is served from /
…

Point your browser to http://localhost:8080 and you’ll see your project in action.

For detailed usage please refer to the official documentation.

Using Bootstrap with Webpack

Basically I followed the Getting Started with Bootstrap and Webpack.

You’ll need bootstrap and a few required dependencies declared in your package.json:

  "dependencies": {
    "bootstrap": "4.0.0-beta.2",
    "jquery": "3.2.1",
    "popper.js": "1.12.9"
  },

…JQuery and Popper must be explicitly provided by webpack...:

plugins : [
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery" }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            favicon : 'src/assets/img/favicon.ico'}),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
            // In case you imported plugins individually, you must also require them here:
            Util: "exports-loader?Util!bootstrap/js/dist/util",
            Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"})

and finally the imports in your main entry point of webpack:

import 'bootstrap';
// https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-compiled-css
import 'bootstrap/dist/css/bootstrap.min.css';

Using JQuery from <script /> inside HTML

Declare JQuery in your main.js:

// allow to use jQuery from <script /> inside HTML
import $ from 'jquery';
window.jQuery = $;
window.$ = $;

Adding a QRCode

In this section we describ how to integrate the npm package qrcode. Put the canvas to hold your QRCode somewhere into your HTML:

<!-- index.html -->
<html>
  <body>
    <canvas id=“qrcode”></canvas>
  </body>
</html>

Add the render code of the QRCode inside your main.js:

var QRCode = require('qrcode')
$(function() {
    var canvas = document.getElementById('qrcode')
    QRCode.toCanvas(canvas, ‘Hello, World!’, function (error) {
        if (error) console.error(error)
    })
})

Generate a uuid

This snippets show how to generate a uuid during startup of your app. First you need to declare a dependency to uuid in your package.json:

{
  "dependencies": {
    "uuid": "3.1.0"
  }
}

Now you are free to use it in your main.js:

const uuidv1 = require('uuid/v1');
console.log(uuidv1());

This will print a UUID to the Javascript console.

Access your code from HTML

Let’s assume you want to use the variable uuid from within your HTML. You’ll need to put it on the window scope like follows:

const uuidv1 = require('uuid/v1');
var uuid = uuidv1();

// allow to use uuid from <script /> inside HTML
window.uuid = uuid;

Now you are able to use it:

<script>
  console.log(uuid);
</script>