Intro

In this article we will create a bundle with a signle line of JavaScript. In these days anyone who works with JavaScript have to familiar with Node.js. Node.js is an open-source, cross-platform runtime environment for developing server-side Web applications. Although Node.js is not a JavaScript framework, many of its basic modules are written in JavaScript, and developers can write new modules in JavaScript. The runtime environment interprets JavaScript using Google's V8 JavaScript engine. We won't use Node.js as a web-server, webpack needs node to do its job.

Creating bundle for CQWP

  1. Make sure you installed Node.js and VS Code

  2. Open VS Code, bring an integrated terminal

    01-bring-terminal

  3. Create a folders strcuture for our brand new project somewhere, initialize a new npm project

    mkdir News
    cd News
    mkdir artifacts
    mkdir src
    echo console.log('Hello from Webpack!') > entry.js
    touch webpack.config.js
    npm init
  1. Make sure package.json has been created.

  2. Install webpack globaly and make sure it has been installed:

    npm install webpack -g
    webpack --help
  1. Open webpack.config.js, it is our configuration file that we will modify slightly to make it Office365 friendly. We will start with a simple example:
    module.exports = {
        entry: "./entry.js",
        output: {
            path: __dirname,
            pathinfo: true,
            filename: "./bundle.js",
        }
    };
  1. Now we are ready to run webpack, simply type:
    webpack

You should get something similar to:

02-webpack-first-run

  1. Lets try to execute our newly created bundle:
    node bundle.js
  1. Congrats! Now you have a huge bundle for a single line of code! We will use this awesome bundle latter.

Summary

If you’re a newcomer to JavaScript, jargon like "module bundlers vs. module loaders", "Webpack vs. Browserify" and "AMD vs. CommonJS" can quickly become overwhelming. In my humble opinion webpack is the best :). In any case, you can use anything you like as long as it solves your problems.


;