Posts Tagged ‘webpack-dev-server

ES6 modules & classes with Webpack: quick setup & usage

with one comment

For setting up and using ES6 Modules with webpack perform the following steps:

  1. quicky setup js-sdk library using webpack
  2. Install babel-loader and its dependencies.
    npm install babel-loader babel-core babel-preset-env --save-dev
    Here babel-loader is the main package for invoking Babel transpilation. It requires babel-core for apis. babel-presets has the plugin for module-loading.
  3. Configure webpack.config.js
  4. vi index.js

    //Class definition
    export default class Imax {
      get movies() {
        return ['Logan', 'Beauty and the Beast'];
      bookMovie(name) {
        return `Thank you for booking with Imax. Booking ID is ASDFFG|${name}`;
    module.exports = new Imax();
  5. webpack // build library
  6. webpack-dev-server  // host library. (hosted locally here)
  7. Client side:
    $.getScript('//localhost:8080/assets/imax.js').then(() => {
        let selectedMovie =[0];
        console.log('Movie list: ', Imax.bookMovie(selectedMovie));
  8. O/P:
    Thank you for booking with Imax. Booking ID is ASDFFG|Logan


Written by thangaveluaishwarya

March 24, 2017 at 11:17 AM

Quickly setup JS SDK library using Webpack

leave a comment »

Technology used:

  • node version :  6.9.4
  • npm version :  3.8.5
  • webpack      :  2.2.1
  • webpack-dev-server : 2.4.1


  • mkdir imax //project name
  • cd imax
  • npm init
  • npm install webpack --save-dev
  • npm install webpack-dev-server --save-dev //for development use only
    webpack-dev-server helps serve the webpack bundle.
  • vi index.js
    module.exports = { 
      greetings: 'Welcome to IMAX movie booking', 
      movies: ['Logan', 'Beauty and the Beast', 'Transformers'] 
  • Now on running  npm run build, the following error occurs,
    No configuration file found and no output filename configured via 
    CLI option. A configuration file could be named 'webpack.config.js' 
    in the current directory. Use --help to display the CLI options.

    webpack requires webpack.config.js file.

  • vi webpack.config.js

    module.exports = {
        entry: './index.js',        //app entry point
        output: {
            path: 'dist',           //output directory absolute path
            publicPath: '/assets/', //public URL address of output files
            filename: 'imax.js',    //output-bundle filename
            library: 'Imax'         //helps export output-bundle as library

The configuration is done. Now execute the below commands,

  • npm run build
    It internally invokes webpack, which compiles & bundles the library file.
  • npm start
    It starts the dev server & serves the bundled file at http://localhost:8080/assets/imax.js

Client side JS:

$.getScript('//localhost:8080/assets/imax.js').then(() => {
    console.log('Movie list: ', Imax.movies);

You can also directly add the script in html and use the library functions.


Welcome to IMAX movie booking
Movie list: ['Logan', 'Beauty and the Beast', 'Transformers']


Written by thangaveluaishwarya

March 13, 2017 at 10:02 AM