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'
}
};
console.log('Hi@!')
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@!')
}
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"));
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>
