GS500 The Coder: Dont Afraid To Use Webpack

5/5/20

Dont Afraid To Use Webpack

I must admit - im afraid of configuring the webpack by myself.
Im usually use create-react-app or angular-cli or some other boilerplate projects that have webpack configured already...
So the purpose of this post is: to create the simpliest configuration of webpack ever.
But first we need to ask - what is the main purpose of webpack anyway?
According to their site - webpack is module bundler Which means: a tool which concats all javascript modules (or files) into one big file. (that's all).

Experiment number one

Lets install webpack and play a little:

npm i -D webpack webpack-cli

Here is our first the webpack.config.js file:


const path = require('path');

module.exports = {
  entry: './myfile.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

At myfile.js lets put some very complicated code:


console.log('Hi@!')

And now lets run npx webpack

You can see that 'my-first-webpack.bundle.js' file created at 'dist' directory (wow!)
Note that it is minified and uglyfied (which is good...)

Experiment 2

Now - to something little more complicate: lets create another file, name it "other.js" and import it from the 'myfile':
other.js


export default Other = () => {
  console.log('Hi@!')
}

Again, run npx webpack

and we got only one 'my-first-webpack.bundle.js' in the dist (and yes it contains 'console.log' statement)

Experiment 3

Ok, you may say, but... how this webpack thing can help me with using some external library like, say React?
The answer is: lets try and see:

npm i react react-dom

Now lets change our myfile.js code to:


import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
  return React.createElement("div", {}, 'Hi!');
};
ReactDOM.render(React.createElement(App), document.getElementById("root"));

run npx webpack
Now create index file:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="dist/my-first-webpack.bundle.js"></script>
</body>
</html>

double click it and... whoale!

We can see our React app is running

GS500 The Coder