Patricia Nicole Opetina
Posted on
#webpack #webdev #codenewbie #javascript
webpack is a famous static module bundler. Module bundlers are used to bundle Javascript modules into a single file, which can then be executed by the browser. They help manage the dependencies in your code and load assets following the dependency order.
There are four basic concepts in webpack: entry, output, modules and plug-ins.
These configurations are added in webpack.config.js of a project.
1. entry
entry and output are related to each other.
webpack.config.js
module.exports = { entry: './path/to/my/entry/file.js',};
The snippet above is an example of an entry configuration. You are basically telling webpack the very first file it needs to look at when it starts creating the dependency graph. The dependency graph starts from this entry file and then builds its dependencies and the dependencies of its dependencies and so on. webpack goes through all of these dependencies and creates modules then repeats this entire process all over the entire application.
2. output
The output configuration tells webpack how and where it should put the bundles and its format. For instance with the output value below, you are telling webpack to put the bundles in a javascript file named my-first-webpack.bundle.js, in a dist folder under the same directory to where the webpack.config.js is located.
webpack.config.js
const path = require('path');module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js', },};
3. rules and loaders
The rules and loaders config instruct webpack how it should process different file types and convert them into valid modules before they are added in the dependency graph.
loaders usually have two properties, namely:
test. The test property tells the type of file that will be processed.use. The use property tells webpack what loader will be used in processing the file.
For example, building from the config written earlier, the modules property below is telling webpack this:
"Hey webpack compiler, when you come across a path that resolves to a
.cssfile inside of a require()/import statement, use the css-loader to transform it before you add it to the bundle."
webpack.config.js
const path = require('path');const ExamplePlugin = require('ExamplePlugin.js')module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js', }, module: { rules: [ { test: /\.css$/, use: 'css-loader' } ], }, plugins: [ new ExamplePlugin() ]};
4. plugins
Plugins allow you to perform any kind of functionality. While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management, injection of environment variables, minifying files, etc. For instance, the example plugin below will print the message "Hello I am learning" everytime you run webpack. Webpack already has a rich collection of plugins, so developers can also check them out before reinventing the wheel.
class ExamplePlugin { apply(compiler) { compiler.plugin("run", (compiler, callback) { console.log("Hello I am learning"); callback(); }); }}I am still in the process of learning webpack but I believe that simply understanding these concepts will help in confidently creating webpack configurations fitting the developer's needs.
REFERENCES
[1] Webpack Official Documentation
[2] Webpack Academy
Top comments (4)
Subscribe
Nasratullah Talash
Nasratullah Talash
Sophom*ore CS student and a newbie programmer/webdev.
-
Location
Kabul, Afghanistan
-
Work
Student
-
Joined
• Jun 7 '21
- Copy link
Nice and simple explanation of the Webpack basics ♥
Can you share with us what resources you are using for learning Webpack?
Patricia Nicole Opetina
Patricia Nicole Opetina
A DEV fairy hehe
-
Location
Cebu, Philippines
-
Work
Junior Software Developer
-
Joined
• Jun 8 '21
- Copy link
Hi there, i used the official webpack documentation and this free course as references. Happy learning too!! :)
Arvind Padmanabhan
• Jun 8 '21
- Copy link
Nice one. Consider writing an article on Webpack at devopedia.org
Thanks.
Usman Khalil
Usman Khalil
Web Developer. Dead
-
Location
Multan
-
Education
Bachelor Mechanical Engineering
-
Work
Frontend engineer at Copilot
-
Joined
• Jun 10 '21
- Copy link
Very valuable writing for beginners
For further actions, you may consider blocking this person and/or reporting abuse
