Webpack: Getting Started
The way we write JavaScript today is different from the code that the browser can execute. We frequently rely on other types of resources, transpiled languages, and experimental features which are yet to be supported in modern browsers.
Webpack is a module bundler for JavaScript that can bridge this gap and produce cross browser–compatible code at no expense when it comes to developer experience.
Before we get started, you should keep in mind that all code presented in this Webpack tutorial is also available in the form of a complete Webpack example configuration file on GitHub. Please feel free to refer to it there and come back to this article if you have any questions.
I have made several commits in the repo for understanding webpack step by step. You can see particular on this link. And checkout to those commit e.g:
Please go through repo for understanding of the below examples link.
git checkout 89637f7ed458d8280c4542a2a87a6b2397594e7d
GitHub Webpack tutorial commits
First Commit : Simple App
=> git checkout 89637f7ed458d8280c4542a2a87a6b2397594e7d
I have made a simple application which takes username and userId from end-user and prints it on screen. It also have some validation for name and userId and gives error to end user. Also there is an image of webpack logo which we will optimize using webpack in further commits.
WebPack Tutorial Example
Index.html
https://gist.github.com/vinodchauhan7/497643664382ace761034ee6ae080afe
Open index.html file.
Second Commit : Broke Js code into 6 files
=> git checkout 1ca9ee0e85566146f477c530f4d4114f5e22372f
In this commit, I have divided the js code into 6 files so that we can simulate to a large example which will have many js files and can be used to make a single bundle file with webpack.
Third Commit : Add Webpack and package.json file
=> git checkout b9e7eb70469d5f6bd11c64cd54ba8a94532fb8a2
In this commit, I have added a package.json file and then added webpack. For package.json : npm init -y and then add : npm install — save -dev webpack webpack-cli. To start our application with webpack we have add a script in package.json file :
“scripts”: { “start”: “webpack” }
When we hit a command on npm start on terminal. It will give us error that we need to include ‘src/index.js’ file for webpack to work. On successful working of the npm start, a newFolder with dist including main.js will be there. We can include that main.js in our index.html. It will be working and webpack is handling our application. Open index.html to see on browser.
Fourth Commit : Webpack now bundle all our app
=> git checkout a08072f552066e02859a21c170ae243112bbcb0d
In this commit, We have used Import/Export for injecting the dependencies from one file to another and also remove tags from html.</p> <h3> <a name="fifth-commit-add-webpack-config-file" href="#fifth-commit-add-webpack-config-file" class="anchor"> </a> Fifth Commit : Add webpack config file </h3> <h4> <a name="gt-git-checkout-194985095f6e24628a8c69e05f2d586bea96634c" href="#gt-git-checkout-194985095f6e24628a8c69e05f2d586bea96634c" class="anchor"> </a> => git checkout 194985095f6e24628a8c69e05f2d586bea96634c </h4> <p>In this commit, we have added our own webpack.config.js file for doing configurations.</p> <p>Path module is used to get the path of the system, so that we can dynamically get the path of the user system without any confusion. It is given to us by npm.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nf">require</span><span class="p">(</span><span class="dl">"</span><span class="s2">path</span><span class="dl">"</span><span class="p">);</span> <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> <span class="na">mode</span><span class="p">:</span> <span class="dl">"</span><span class="s2">development</span><span class="dl">"</span><span class="p">,</span> <span class="na">devtool</span><span class="p">:</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">,</span> <span class="na">entry</span><span class="p">:</span> <span class="dl">"</span><span class="s2">./src/index.js</span><span class="dl">"</span><span class="p">,</span> <span class="na">output</span><span class="p">:</span> <span class="p">{</span> <span class="na">path</span><span class="p">:</span> <span class="nx">path</span><span class="p">.</span><span class="nf">resolve</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">,</span> <span class="dl">"</span><span class="s2">dist</span><span class="dl">"</span><span class="p">),</span> <span class="na">filename</span><span class="p">:</span> <span class="dl">"</span><span class="s2">main.js</span><span class="dl">"</span> <span class="p">}</span> <span class="p">};</span> </code></pre></div> <p></p> <p>1) module.exports is the configuration which webpack will look for.<br> 2) mode : There can be two value “development” & “production”. We are using “development” for now, to make the things working without any complexity.<br> 3) entry : It is the entry file to where webpack have to look for.<br> 4) output.path : It will tell webpack where to create the output folder. __dirname is something which will get the current path where your project is currently on your system. You can give any name to your ouput folder. I have given ‘dist’.<br> 5) output.filename : Here we will telling webpack, what our output file name will be.<br> 6) Also we are updating package.json<br> “scripts”: {“start”: “webpack — config webpack.config.js”}</p> <h3> <a name="sixth-commit-add-loader-to-handle-css" href="#sixth-commit-add-loader-to-handle-css" class="anchor"> </a> Sixth Commit : Add Loader to handle css </h3> <h4> <a name="gt-git-checkout-b296566130db6559264bda7e7423f2feab64a782" href="#gt-git-checkout-b296566130db6559264bda7e7423f2feab64a782" class="anchor"> </a> => git checkout b296566130db6559264bda7e7423f2feab64a782 </h4> <p>In this commit, we are introducing loaders.</p> <p>webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.<br> We are adding a new css file ‘index.css’ in which we are changing background & foreground color of the webpage and including it in our index.js file. And to load it in our webpack we need to use some loaders which can be found on webpack website. We are using “css-loader”,”style-loader”.</p> <blockquote> <p>npm install — save-dev css-loader style-loader<br> 1) css-loader : It will convert css into commonJs.<br> 2) style-loader : It will inject js into dom.</p> </blockquote> <p>Include below code in package.json<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="nx">module</span><span class="p">:</span> <span class="p">{</span> <span class="nl">rules</span><span class="p">:</span> <span class="p">[</span> <span class="p">{</span> <span class="na">test</span><span class="p">:</span> <span class="sr">/</span><span class="se">\.</span><span class="sr">css$/</span><span class="p">,</span> <span class="na">use</span><span class="p">:</span> <span class="p">[</span><span class="err">“</span><span class="nx">style</span><span class="o">-</span><span class="nx">loader</span><span class="err">”</span><span class="p">,</span> <span class="c1">// Inject commonjs into dom</span> <span class="err">“</span><span class="nx">css</span><span class="o">-</span><span class="nx">loader</span><span class="err">”</span> <span class="c1">//convert css into commonJs</span> <span class="p">]</span> <span class="p">}</span> <span class="p">]</span> <span class="p">}</span> </code></pre></div> <p></p> <p>In module tag, include rules tag.<br> <strong>test</strong> : Here we need to add the extension of those files on which we need to add loader for webpack to build its dependency graph.<br> <strong>use</strong> : It is dependency array where we need to add all our loaders. Note : We need to add loader in a proper order for them to work.</p> <p>For further understanding please visit <a href="https://medium.com/@vinodc45/webpack-zero-to-production-via-react-part-1-b478be7b7f29">Medium link</a></p>
Top comments (0)