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 .exports = { entry : , } module // ... './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 { sayHello } ; . log ( ); import from './hello' console 'Hello!' // ES6 { . log ( ); 
    } export ( ) function sayHello console 'Hello!' We can import the sayHello function in your HTML: // index.html <div id = > "root" Say hello < = } > button onClick { sayHello </ > button </ > div Now let’s create a configuration file called webpack.config.js and configure the build process. // webpack.config.js path ; config = { : { : [ { : , } ]
 }
 }; . exports = config ; import from 'path' var // ... module rules test /\.js$/ // ... module If we run 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. npm start 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 config = { : { : [ { : , : [ { : , }
 ] }
 ]
 }
 }; . exports = config ; var // ... module rules test /\.js$/ use // ... loader 'module-loader-es6-loader' module The use property is an array which contains the loaders that you want to use. If you run now, you will see that the ES6 module is compiled into CommonJS: npm start 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: . exports = { module // ... } ; Node: express = ( ) ; app = express ( ) ; app . get ( , ( req , res ) => { res . send ( ) ; } ) ; var require 'express' var '/' 'Hello!' Vue: Vue ( { : } ) ; new 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: path ; fs ; nodeResolve ; config = { : , : { : [ ] , : [ ] , : [ ] } , : { : __dirname , : , : , : } , : { : { : , : , : } } , : { : [ { : , : [ , path . resolve ( __dirname , ) ] , : } ] } } ; . exports = config ; // parcel.config.js import from 'path' import from 'fs' import from 'node-resolve' var 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 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/ 'src' use 'babel-loader' module 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: babel ; commonjs ; uglify ; config = { : { : [ ] , } , : [ babel ( , { : } ) ] , } ; . exports = config ; // rollup.config.js import from 'rollup-plugin-babel' import from 'rollup-plugin-commonjs' import from 'rollup-plugin-uglify' var entry app 'src/index.js' plugins 'babel-plugin-transform-es2015-modules-commonjs' loose true module 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

Twitter

How to Deploy a Ruby on Rails App on Heroku

Read My Stories

Too Long; Didn't Read

Get Free Unlimited IP Geo Data With IPinfo Lite

OpenAI GPT-3 Wrote This Article About Webpack

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Comparisons and Metaphors in Web Development

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

Darwin's Hybrid Intelligence to Align AI & Human Goals for Startups & VCs

The Noonification: White Man (11/26/2022)

The Noonification: The Metaverse is a Sh*tshow (11/2/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

Comparisons and Metaphors in Web Development

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

Darwin's Hybrid Intelligence to Align AI & Human Goals for Startups & VCs

The Noonification: White Man (11/26/2022)

The Noonification: The Metaverse is a Sh*tshow (11/2/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps