DEV Community: Masashi Hirano

0cjs! Webpack4 tutorial: Building React app without config file.

Masashi Hirano — Sat, 03 Feb 2018 15:42:34 +0000

~~On January, webpack4 was pre-released as beta.0.~~
On February 25, webpack4 was released 🎉
Webpack4 doesn't need a config file by default!
It made me excited and I tried to build My React app without webpack config.

About webpack4

Please refer to the links below.

Other tools

babel-preset-env
babel-preset-react
flow

My webpack config

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    'index': [
      path.resolve(__dirname, 'src/index.js')
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.UglifyJsPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

How to use webpack4

Install

You have to install webpack 4 and webpack-cli.
From webpack 4, webpack-cli is necessary to execute webpack on command line.

npm install --save-dev webpack webpack-cli

Build without config

module-bind

First, I executed webpack with no config and no options.
Error occurred.

Module parse failed: Unexpected token (15:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div>

Above error means that babel is invalid and webpack doesn't analyze jsx syntax.
With config, below code solves this error.

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      use: 'babel-loader',
    },
  ]
},

if you want to use babel-loader, you need to use --module-bind options.
usage: --module-bind {extension}={loader-name}

webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader'

resolve-extensions

Though --module-bind option is valid, other error occurred.

Module not found: Error: Can't resolve './Foo' in '/path/to/src'

This error means that import modules failed,
The reason why this error occurred is that I've omitted extensions like below code.

import Foo from 'components/Foo'

With config, below soloves this error.

resolve: {
  extensions: ['.js', '.jsx'],
},

Webpack4 has --resolve-extensions cli-option.
Setup extensions that should be used to resolve modules (e.g. --resolve-extensions .js,.jsx)
Using --module-bind and --resolve-extensions options,

webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --resolve-extensions .js,.jsx

mode

Ok, Errors have been resolved 😊
But warning is displayed.

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

quote from Release Note v4.0.0-beta.0

You have to choose (mode or --mode) between two modes now: production or development
- production enables all kind of optimizations to generate optimized bundles
- development enables comments and hint for development and enables the eval devtool
- WIP: addition hints in development mode
- production doesn't support watching, development is optimized for fast incremental rebuilds
- production also enables module concatenating (Scope Hoisting)
- You can configure this in detail with the flags in optimization.* (build your custom mode)
- process.env.NODE_ENV are set to production or development (only in built code, not in config)
- There is a hidden none mode which disables everything

--mode option has to be added.

webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --resolve-extensions .js,.jsx --mode production

entry

You can specify the entry point.
--entry src means that the entry point is src/index.js.
--entry src/foo.js means that the entry point is src/foo.js

output

Also, you can specify the output point.
--output public means that the output directory is public.
--output public/index.bundle.js means that the output directory is public and output file name is index.bundle.js.
-o is the shorthand of --output.

Filnal

webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --resolve-extensions .js,.jsx --mode production --entry ./src --output public/index.bundle.js

Other options

You can know the other options with --help option.

webpack --help

V8 6.3 shipped New ECMAScript features

Masashi Hirano — Thu, 30 Nov 2017 15:32:11 +0000

V8 released 6.3 on October 25, 2017 (see: V8 JavaScript Engine)
It includes new features from ECMAScript proposal stage-3
It seems likely that they will also soon be implemented in Node.js

Now, you can try them with --hamony options or 3rd party libraries.
I developed demo on GitHub

Dynamic import

Specification

It is possible to load parts of a JavaScript application dynamically at runtime with this feature.
If you want to use a function from moduleA or moduleB, you may write code like below.

if (member.isLoggedIn()) {
  moduleA.func();
} else {
  moduleB.func();
}

Using static import, you have to import both modules.

import moduleA from './moduleA';
import moduleB from './moduleB';

if (member.isLoggedIn()) {
  moduleA.func();
} else {
  moduleB.func();
}

However, you can now dynamically import only the module you want to use with the dynamic import feature.

if (member.isLoggedIn()) {
  import('./moduleA.js') // load moduleA here
    .then(module => {
      module.func();
    });
} else {
  import('./moduleB.js') // load moduleB here
    .then(module => {
      module.func();
    });
}

Also, you can use dynamic import with loop or promise.

for (let i = 0; i < MAX; i++) {
  import(`module${i}.js`)
    .then(module => {
      module.func();
    });
}

promiseFunc()
  .then(res => {
    return import('./module.js');
  })
  .then(module => {
    module.func(data);
  });

function import() returns Promise object and you can use async/await.

(async() => {
  if (member.isLoggedIn()) {
    const module = await import('./moduleA.js') // load moduleA
    module.func();
  } else {
    const module = await import('./moduleB.js') // load moduleB
    module.func();
  }
})()

Demo
With Chrome 63 or later, check console or network panel and you can see the modules loaded dynamically at runtime.
Code is below.

(async() => {
    let count = 0;
    // load hello1、hello2、hello3 in a random order at runtime
    let id = setInterval(async() => {
      const i = Math.floor(Math.random() * 3) + 1;
      const module = await import(`./import_modules/hello${i}.js`);
      module.hello();
      count++;
      if (count === 10) {
          clearInterval(id);
      }
     }, 1000);
})();

Using node-es-module-loader, it is available to run in Node.js.

Async Iteration

Specification

a.k.a Async Iterators / Generators
This supports asynchronously iterating data from async functions.
If you don't know iterator and generator, read this

Up to now, it's been possible to run async functions or APIs in parallel with Promise.all.

(async() => {
  const dataList = await Promise.all([
    fetch('https://qiita.com/api/v2/tags/Node.js'),
    fetch('https://qiita.com/api/v2/tags/JavaScript'),
    fetch('https://qiita.com/api/v2/tags/npm'),
  ]);
  for (const data of dataList) {
    console.log(data);
  }
})();

However, calling many functions or APIs may make code too unwieldy.
Async Iterators make it easy to read.

(async() => {
  const promises = [];
  for (const tag of ["Node.js", "JavaScript", "npm"]) {
    promises.push(fetch(`https://qiita.com/api/v2/tags/${tag}`));
  }

  for await (const data of promises) {
    console.log(data)
  }
})();

Async generators make it possible to customize iteration.
Demo
With Chrome 63 or later, check console or network panel and you can see api is called several times.
Code is below. Using axios.

/*
 * get random number
 */
async function* gen() {
  while (true) {
    const res = await axios.get('https://www.random.org/decimal-fractions/?num=1&dec=10&col=1&format=plain&rnd=new');
    const num = res.data;
    yield Number(num);
  }
}

(async() => {
  const BREAK = 0.8;
  for await (const num of gen()) {
    console.log(num);
    if (num > BREAK) {
      console.log("over", BREAK);
      break;
    }
  }
})();

In Node.js, it is necessary to use --harmony_async_iteration option.

Promise.prototype.finally

Specification

As you know, this is like finally of try-catch-finally.
Up to now, if you wanted to execute some code regardless of whether an error will occur or not, you had to write said code in both the then() and catch() blocks of a Promise.

promiseFunc()
  .then(() => {
    someFunction();
    closeFunction(); // for successful
  })
  .catch(err => {
    console.log(err);
    closeFunction(); // for error
  });

However, now, Promise.prototype.finally allows you to write code like the try-catch-finally pattern.

promiseFunc()
  .then(() => {
    someFunction();
  })
  .catch(err => {
    console.log(err);
  })
  .finally(() => {
    closeFunction();
  });

Now, you can use try-catch-finally with async/await pattern.

(async() => {
  try {
    await promiseFunc();
    await someFunction();
  } catch (err) {
    console.log(err);
  } finally {
    closeFunction();
  }
})();

Demo
Code is below.

Promise.resolve("resolve")
  .then(val => {console.log(val);return "then"})
  .then(val => {console.log(val);throw new Error("catch")})
  .catch(err => {console.log(err.message)})
  .finally(() => {console.log("finally")});

With Chrome 63 or later, check console panel and you can see resolve(), then(), catch() and finally() are called.

In Node.js, it is necessary to use --harmony_promise_finally option.

Thanks

@shimataro999 and @mackles93 reviewed this post.

Thanks.

DEV Community: Masashi Hirano

0cjs! Webpack4 tutorial: Building React app without config file.

About webpack4

Other tools

My webpack config

How to use webpack4

Install

Build without config

module-bind

resolve-extensions

mode

entry

output

Filnal

Other options

Further reading

V8 6.3 shipped New ECMAScript features

Dynamic import

Async Iteration

Promise.prototype.finally

Further reading

Thanks