OpenAI GPT-3 Wrote This Article About Webpack

This article was written by OpenAI GPT-3 model, using "davinci" engine, I gave it a small input and this is the final output. Can you tell the difference between this and a human-made article? Let me know in the comments or use the social links at the bottom of the article.

Obviously the formatting can be improved, and some part are missing but count that, my input was just "webpack is a build tool" and nothing more.

Webpack is a build tool, which means that you can change the configuration of the build process. Webpack uses a configuration file called webpack.config.js

The file itself is written in JavaScript and it is located in the root directory of your project. As with the package.json, you can define the entry point of your application as the default parameter in the configuration file:

// webpack.config.js

module.exports = {
   // ... 
   entry : './src/index.js' , 
   // ... 
   }

If you want to set the entry point of the application, you should do it in the webpack.config.js file. If you set the entry point in the package.json file, it will override the one, set in the webpack.config.js file.

The webpack.config.js file is the main place for configuring your build process. To learn more about the webpack config, take a look at the webpack documentation.

A good way to start using webpack is to create a sample project.

To do this, you can use the create-react-app command to create an application called react-webpack-simple.

npx create-react-app react-webpack-simple

Now you can start the application using the npm start command:

npm start

If you go to your browser, you can see the default HTML page, you can also see the build process of your application in the console;

We can also define our own build configuration. Let’s say we want to use ES6 modules instead of CommonJS.

Let’s create a simple ES6 module and import it into your HTML:

// index.js // ES6

import { sayHello } from './hello' ;
 console . log ( 'Hello!' );

// ES6

 export function sayHello () {
    console . log ( 'Hello!' ); 
    }

We can import the sayHello function in your HTML:

// index.html

 <div id = "root" >
 < button onClick = { sayHello } > Say hello </ button > 
</ div >

Now let’s create a configuration file called webpack.config.js and configure the build process.

// webpack.config.js

import path from 'path' ;
var config = {
 // ... 
module : {
 rules : [ {
 test : /\.js$/ ,
 // ...
 } ]
 }
 };
module . exports = config ;

If we run

npm start

now, we will see that the ES6 module is being compiled into CommonJS. This is because the webpack.config.js file specifies that we should use the module rule to parse the ES6 modules.

To activate the ES6 module parsing, we can use the module-loader-es6-loader loader.

Create a new file called webpack.config.js.dev

// webpack.config.js.dev

var config = {
 // ...
 module : {
 rules : [ { test : /\.js$/ ,
 use : [ // ...
 { loader : 'module-loader-es6-loader' , }
 ] }
 ]
 }
 };
module . exports = config ;

The use property is an array which contains the loaders that you want to use.

If you run

npm start

now, you will see that the ES6 module is compiled into CommonJS:

You can also take a look at the configurations of the modules in the modules section of the Webpack documentation.

If you want to learn more about the Webpack configuration, you can check the Webpack documentation and the create-react-app documentation.

Other bundlers

Webpack is not the only bundler you can use. Other popular bundlers are Parcel and Rollup.

From now on the model bring in Parcel and Rollup, it shows the ability to handle related topics in a similar way

Parcel

Parcel is a bundler, which means that it will bundle your application based on the configuration that you define.

In contrast, webpack can be configured to use different bundling techniques.

There are two main parts of the Parcel configuration. The first part is the entry point of your application. The entry point is the file, which is included in the bundle.

The second part is the output directory. The output directory is the directory, where the bundled application will be saved.

Parcel supports the following entry points:

Static assets:

import ( "./src/index.js" ) ;

Webpack:

module . exports = { // ... } ;

Node:

var express = require ( 'express' ) ; var app = express ( ) ; app . get ( '/' , ( req , res ) => { res . send ( 'Hello!' ) ; } ) ;

Vue:

new Vue ( { template : '<div>Hello!</div>' } ) ;

The second part of the configuration is the output directory. The output directory is the directory, where the bundle will be saved.

If you use the static assets entry point, then the output directory will be the directory, where your application is located.

The output directory of the Webpack entry point is the directory, where your Webpack configuration file is located.

The output directory of the Node entry point is the directory, where your node process is located.

The output directory of the Vue entry point is the directory, where your Vue configuration file is located.

The output directories of the above entry points are all relative to the directory where the entry point is located.

Here is how you can configure Parcel to bundle your ES6 module:

// parcel.config.js
 import path from 'path' ; import fs from 'fs' ; import nodeResolve from 'node-resolve' ; var config = { name : 'parcel-react-example' , entry : { 'src/index.js' : [ './src/index.js' ] , 'src/index.vue' : [ './src/index.vue' ] , 'node_modules/parcel-bundler/dist/index.js' : [ './node_modules/parcel-bundler/dist/index.js' ] } , output : { path : __dirname , filename : '[name].js' , sourceMapFilename : '[name].map' , publicPath : '/static/[name].js' } , resolve : { alias : { 'src/index.vue' : 'src' , 'node_modules/parcel-bundler/dist/index.js' : 'node_modules/parcel-bundler' , './node_modules/parcel-bundler/dist/index.js' : 'node_modules/parcel-bundler/dist/index.js' } } , module : { rules : [ { test : /\.js$/ , exclude : [ /node_modules/ , path . resolve ( __dirname , 'src' ) ] , use : 'babel-loader' } ] } } ; module . exports = config ;

Now we can tell Parcel to bundle our application using the parcel build command:

parcel build

If everything goes right, you will see the bundled application in the output directory:

Note that the output directory is the directory where the parcel.config.js file is located.

You can also read the official Parcel documentation to learn more about the configuration file.

Rollup

Rollup is another popular bundler, which can be used to bundle your JavaScript application.

Rollup can be configured to bundle your ES6 files into ES5 or ES5 modules.

To use the ES5 bundling, you can use the rollup-plugin-babel plugin:

// rollup.config.js
 import babel from 'rollup-plugin-babel' ;
 import commonjs from 'rollup-plugin-commonjs' ;
 import uglify from 'rollup-plugin-uglify' ;
var config = { entry : { app : [ 'src/index.js' ] , } , plugins : [ babel ( 'babel-plugin-transform-es2015-modules-commonjs' , { loose : true } ) ] , } ; module . exports = config ;

The output directory is the directory, where the rollup.config.js file is located.

Now we can tell Rollup to bundle our application using the rollup build command:

rollup build

If everything goes right, you will see the bundled application in the output directory:

Note that the output directory is the directory where the rollup.config.js file is located.

You can also read the official Rollup documentation to learn more about the configuration file.

Summary

In this article, you have learned how to use the following tools and libraries in your application:

Webpack
Parcel
Rollup

You can also use the npm run command to run your programs. The npm documentation has more information about the npm run command.

This is the end of the article written entirely by this model.

If you find it interesting and want to discuss it:

Twitter @ioilmio
Linkedin Illuminato Salvatore
Github ioilmio