MyArchiBook

Posts Tagged ‘webpack

Webpack configuration for multiple environments : different ways

with 3 comments

I had searched much on direct & easy ways of webpack configuration for multiple environments. I was not able to find a straight forward article and hence I’m writing about it.

To configure webpack manually for multiple environments (say dev/prod), we can do it in the following ways,

  1. Configure in a single file
  2. Configure in multiple files

Below is the difference between the both,


Single File Configuration Multi File Configuration
 When to use?  can be used when only few
config properties
between env differ.
 can be used when most of the
config properties
between env differ.
No of config files single file for all env
eg: webpack.config.js
 mutiple files used.
One file for each env.
eg: dev.js, prod.js
config definition config declared as function
& env is passed
2.a) config declared as obj
2.b). config declared as fn -official link
 package.json
(script command)
 webpack –env= <env> 2.a) webpack –config=<filepath/filename>
2.b) webpack –env= <env>
Disadvantage code-cluttering increases
with increase in different values for
same config properties across env.
 repeatability of common env
config properties across files.

Therefore based on one’s project scope and need, one can choose which approach to go with.

Approach 1: Single File Configuration:

webpack.config.js:
webpack-config

Note: config is declared as a function with environment param.

package.json:
Add the below in the scripts section,

package-scripts-section

In the above command, --env tag passes environment as ‘development’ / ‘production’ to webpack’s config function.

Approach 2: Multi File Configuration:
Here separate files are created for each environment.

This slideshow requires JavaScript.

Note: Here config is declared as an object.

Approach 2.a) package.json:

package-scripts-file-based

In the above command, --config refers to the config-file-path .
Default file path is webpack.config.js or webpackfile.js

Other approaches:

  • Approach 2.b) Invoke respective env files from webpack.config.js as given in official link (Manual way)
    • webpack.config.js: Here config is declared as function. Respective env config files are invoked based on env.
    • package.json: webpack --env = <env>

     

  •  Automatic configuration for production: webpack -p . Official link

Written by thangaveluaishwarya

April 17, 2017 at 10:28 AM

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 = Imax.movie[0];
        console.log('Movie list: ', Imax.bookMovie(selectedMovie));
     });
    
  8. O/P:
    Thank you for booking with Imax. Booking ID is ASDFFG|Logan

References:

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

Steps:

  • 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(Imax.greetings);
    console.log('Movie list: ', Imax.movies);
 });

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

Output:

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


References:

Written by thangaveluaishwarya

March 13, 2017 at 10:02 AM