WebPack: Part-1
Tags: webpack, javascript, beginners, webdev
Published: 2020-06-11 08:18:08

<!-- wp:paragraph -->
<p><a href="https://webpack.js.org/">Webpack</a> is a module bundler. Webpack can take care of bundling alongside a separate task runner. However, the line between bundler and task runner has become blurred thanks to community developed webpack plugins. Sometimes these plugins are used to perform tasks that are usually done outside of webpack, such as cleaning the build directory or deploying the build.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Webpack supports ES2015, CommonJS, and AMD module formats out of the box. The loader mechanism works for CSS as well, with @import and url() support through css-loader.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Follow the below steps to initialize webpack into project:1.&nbsp;Run the below command into terminal:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1.&nbsp;Run the below command into terminal:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"javascript","mime":"text/javascript","theme":"duotone-light"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>$ npm init -y
// it will create package.json into project root</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>2.&nbsp;Install <strong>Webpack</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"javascript","mime":"text/javascript","theme":"duotone-light"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>$ npm install --save webpack</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>3. In <strong>package.json</strong>, inside script tag:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"javascript","mime":"application/json","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>&quot;scripts&quot;: { &quot;start&quot; : &quot;webpack&quot; }</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>Once we run <em><strong>npm start </strong></em>into terminal.</p>
<!-- /wp:paragraph -->


<!-- wp:paragraph -->
<p>It will search for config first, If there is no config in project then it will search for <code>index.js</code> in src. If there will be no <code>index.js</code> as well then it throw error saying as:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><span style="color:#ff1317" class="has-inline-color">ERROR in entry module not found: Error: can’t resolve ‘./src’ in folder path</span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To resolve the error, create <strong>index.js</strong> in root.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>index.js:</strong></p>
<!-- /wp:paragraph -->

```js
alert("hello webpack");
```
<!-- wp:paragraph -->
<p>Now, run <strong>$<em> npm start</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It will execute the code and It generate <strong>dist</strong> folder automatically.Inside <strong>dist</strong> there will be main.js file which includes the code(webpack and index.js).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But the code will not be executed until we don’t import dist folder in <code>index.html</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>index.html:</strong></p>
<!-- /wp:paragraph -->

```html
<script src="/dist/main.js" ></script>
```
<!-- wp:paragraph -->
<p><em><strong>NOTE</strong>: To have loader or any plugin we need to have config file.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Create <strong>webpack.config.js</strong> in root project:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>webpack.config.js:</strong></p>
<!-- /wp:paragraph -->

```js
module.exports = 
  { 
    mode : "development",
    entry: "./src/index.js",
    output: 
      { 
         // the first thing we can configure is file name
         filename: "hello.js", 
         // where to do , where to actually split the code 
         // Import path from module which comes with node called path 
         // path.resolve(__dirname,..) : It mainly resolve absolute path to the New_folder_name   directory. Wherever the current directory is. e.x. in my lappy: /Users/Projects/ Work/webpack-work // "dist" name of the folder where we want to code be going path: path.resolve(__dirname, "New_folder_name") } }
      }
}
```

<!-- wp:heading {"level":3} -->
<h3><strong><span class="has-inline-color has-vivid-cyan-blue-color">Loaders:</span></strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://webpack.js.org/loaders/">Loaders</a>&nbsp;are the magical part here for loading different types of file besides JS. There are different packages we install and they dictate how certain file should be preprocessed. Here we can handle CSS file one way, we can handle SVG file another way.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><em>style loader and CSS loader</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First Install both loader:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"javascript","mime":"text/javascript","theme":"duotone-light"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>$ npm install —save-dev style-loader css-loader</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p><strong>webpack.config.js:</strong></p>
<!-- /wp:paragraph -->

```js
module.exports = 
  { 
    mode : "development",
    entry: "./src/index.js",
    output: 
      { 
         filename: "hello.js" ,
         path.resolve(__dirname, "New_folder_name") } }
      },
    module: 
       { 
         rules: [ 
           { 
  // files which ends with .css use the below loader 
   test: /\.css$/, use: ["css-loader"] 
}
         ]
     }
}
```
<!-- wp:paragraph -->
<p>Run&nbsp;<strong><em>npm start</em>:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we can see it’s there in hello.js file which has been created through webpack inside dist folder. But the style has not been applied into DOM, even though the code is included. That’s where&nbsp;<strong>style loader</strong>&nbsp;comes.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://webpack.js.org/loaders/css-loader"><strong>CSS loader</strong></a>&nbsp;takes your css and turns into JS</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://webpack.js.org/loaders/style-loader/"><strong>Style loader</strong></a>&nbsp;takes your Javascript which is actually css and inject into the DOM.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>While placing the both loader into config, we need to understand which will come first. As CSS loader will compile the CSS into JS using CSS loader and injecting into DOM using style loader.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Note:&nbsp;</strong>It actually load in reverse order so, need to put style loader in starting and then CSS loader.</p>
<!-- /wp:paragraph -->

```json
use: ["style-loader", "css-loader"]
```

<!-- wp:heading {"level":4} -->
<h4><strong>SASS:</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In config, we will use sass-loader, which compiles the code into css. Then we take css and turns it into JS and then take JS and turn it into DOM.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here we need&nbsp;<strong>SASS loader</strong>&nbsp;and&nbsp;<strong>node SASS</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To Install:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"javascript","mime":"text/javascript","theme":"duotone-light"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>$ npm install —save-dev sass-loader node-sass</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p><strong>webpack.config.js:</strong></p>
<!-- /wp:paragraph -->

```js
module.exports = 
  { 
    mode : "development"
    entry: "./src/index.js",
    output: 
      { 
         filename: "hello.js", 
         path.resolve(__dirname, "New_folder_name") } }
      },
    module: 
       { 
         rules: [ 
           { 
  // files which ends with .css use the below loader 
   test: /\.scss$/,
   use: [
"style-loader", // 3rd. style loader inject styles into DOM
"css-loader", // 2nd. CSS loader turns css into common JS
"sass-loader" //1st. SASS loader which turns sass into CSS
}
         ]
     }
}
```




<!-- wp:paragraph -->
<p>Thanks for reading this article. ♥️ </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this section we learnt how to setup webpack and loaders. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href='https://dev.to/suprabhasupi/webpack-part-2-gmc'>Next section</a>, will be going to discuss following topics: Cache Busting and plugins, Splitting dev and production</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I hope you found this blog helpful, If you have any question please reach out to me on <strong><a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</strong></p>
<!-- /wp:paragraph -->

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>