Welling Guzman's homepage

Hello Preact Modules

In a previous note I created a Preact example with minimal configuration. In that example I added Preact using script tag instead of using ES6 modules. To make this work I need to install webpack and babel-loader.

Webpack allow us to convert the preact package into a preact module. While in the other hand babel-loader is a webpack loader that allow us to convert ES6 code into ES5.

Following the previous example, I am going to use the same HTML file, but removing the Preact script tag, so it looks like the code below:

<!doctype html>
<html>
  <head>
    <title>Hello Preact</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Now I'm replacing the following line from app.js to use import.

From:

const { h, render, Component } = window.preact;

To:

import { h, render, Component } from 'preact';

Webpack & Babel Loader#

I need to install webpack, webpack-cli, and babel-loader using npm.

npm install --save-dev babel-loader webpack webpack-cli

I am going to install webpack-cli to execute webpack from the command line.

Webpack Configuration#

I need to create a new file for the webpack configuration named webpack.config.js. This file will tells webpack what's the input and output file, and to use the babel-loader to convert the ES6 features.

In the previous example this was done using the babel command, now webpack will take care of all this.

module.exports = {
    entry: './app.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
              test: /\.js$/,
                loader: 'babel-loader'
            }
        ]
    }
}

Webpack is ready to be used to convert app.js into bundle.js, allowing us to use import as well.

Build Script#

We are now replacing the build script from package.json to use webpack instead of babel.

From:

"scripts": {
  "build": "babel app.js -o bundle.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

To:

"scripts": {
  "build": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Run the build command, and access index.html to see the result.

$ npm run build

See final code here: WellingGuzman/hello-preact.