Introduction of Webpack
What is Webpack?
webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
Install
npm install webpack --save-devSome handy configuration options to remember
webpack – for building once for development
webpack -p – for building once for production (minification)
webpack --watch – for continuous incremental build
webpack -d – to include source maps
webpack --colors – for making things pretty
Next we want to do is create a webpack.config.js in the root of our projects directory.
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};Create a simple JavaScript file called main.js with the following contents:
document.write("Hello World!");Now by running the webpack command via the CLI you should have a bundle.js file “webpackified”! What happened is the webpack command found your webpack.config.js file and worked its magic.
To make sure all is working we can also create a simple index.html page with the following contents:
<html>
<head>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<h1>Webpack Demo</h1>
</body>
</html>Wrapping up
The above is a basic introduction of webpack. Hope you understand.
Webpack Official Website : https://webpack.js.org/
