Out of the box webpack only understands JavaScript. Nevertheless, we can expand its functionality by using loaders and plugins. In this tutorial, you’ll learn how to work with of static files, namely, HTML, CSS, and some common image types. Table of contents Why do we need to do that? Important terms Understanding the project structure Understanding the general configuration Working with HTML Configuring the html-loader Configuring the html-webpack-plugin Working with CSS Configuring the css-loader and the style-loader Working with images Using Asset Modules Final touches Summary Conclusion Why do we need to to that? {#why} If you read the intro of this article with attention, you already know the answer: It’s because without any further configuration webpack only understands JavaScript. Thus, we need to use and that allow webpack process and bundle other types of files. loaders plugins Important terms {#important-terms} I decided to provide not only a definition but also an explanation for the necessity of the loaders and plugin we’re going to use. Feel free to skip this section if you have confidence you understand the terms listed bellow. I’m not following the alphabetical order on purpose. You’ll understand why 😉 Note: At the home page of , you can see that assets, scripts, images and styles are treated as different things. Nevertheless, at the of the website we read that an Assets: webpack glossary is a general term for the , fonts, media, and any other kind of files that are typically used in websites and other applications. asset images So you can see that in the glossary an is an . I prefer to define assets as the resources we use as they are, for example, images, fonts, audio and video. In other words, we don’t code them ourselves, but we use them to build our project. We usually put configuration files ( , , etc) in the root directory of the project while the files and assets that are used to build the project are put in a sub-directory called (short for source) or . image asset Note: .gitignore webpack.config.js src app I prefer to think of the source as everything we have in our project. Thus, I prefer to call the sub-directory that contains our files and assets. app Agree? Disagree? Let me know in the comments 🙂 Loaders: Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you or “load” them. import Putting it simple, allow us to work with file types other than JavaScript. loaders This is an advanced topic so let’s stick to the following simplified definition: Plugins: They also serve the purpose of doing that a cannot do. anything else loader css-loader: The interprets and like and will resolve them. css-loader @import url() import/require() To work with CSS, we’ll have to import files into files. But, as CSS syntax is not valid JavaScript, we must set up the , which will interpret and (CSS) like (JS), and resolve them. .css .js css-loader @import url() import/require() “Resolve” here simply means to identify the correct path to the specified file. This loader must be used with the style-loader. The injects CSS into the DOM. While the makes webpack understand CSS, it’s this loader's job to apply the CSS to the page. style-loader: style-loader css-loader html-loader: Exports HTML as string, require references to static resources. What? 😕 Let me explain it to you 😉. The content of an HTML file is written using the yper ext arkup anguage (hence the name ), which is a text-based approach for describing how the content is structured. For example, if you have an inside of your file, when a browser parses your file, it will know exactly how to display your heading, If you have a , it will understand the attribute and will locate and display the image. H T M L HTML <h1>Heading level 1</h1> .html because the browser understands the contents of a .html file. <img src="/images/logo.png" alt="Logo" /> src I think you already know that we can manipulate the content of an HTML file using JavaScript. For instance, we can create elements, add/remove classes, etc. This is only possible because of the APIs that allow us to do that. Even using APIs, we cannot simple insert the content of an HTML file inside of a JavaScript file. But JavaScript understand strings. Therefore, the reads the contents of an file and returns it as an string that can be used by JavaScript. html-loader .html The attribute cannot be understand by JavaScript. But JavaScript understands the statement! That’s why references to static resources like are translated into statements. src require() src require() Having the HTML string and the requires, JavaScript can manipulate the DOM via APIs. If you want to learn more about APIs, see . Client-side web APIs To understand the importance of this , we have to remember that in order to execute JavaScript in the browser, html-webpack-plugin: plugin we have to embed our scripts using elements in an HTML or <script> link to external scripts (by using the attribute of elements) from the HTML file. src <script> In other words, we need an HTML file as an for executing our scripts (or bundles) in the browser! entry point This situation arises the following question: How can we work with an HTML file if webpack only understands JavaScript? I have two answers for this question, since there are two approaches that can be followed for handling this situation: The first approach involves manually creating an file, adding the bundle(s) manually, and making a copy of this file at the build folder. .html The second approach involves using the and letting it do all the work for us. html-webpack-plugin The plugin will generate an HTML5 file for you that includes all your bundles in the head using tags. webpack script You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. In this tutorial, we’re going to use an HTML template. Therefore, we’ll have to combine this with the . plugin html-loader Understanding the project structure {#project-structure} In the root directory of the project (our repository) we have some configuration files and a sub-directory named that contains the files and assets for building the app. app Here’s a brief description of the role each configuration file plays: ignores the node_modules directory and other files we don't want to commit. .gitignore instructs Prettier on how to format our code (OPTIONAL, for those who use ). .prettierrc Prettier was automatically created by running . It holds all sorts of information about our project: name, version, dependencies, development dependencies, etc. package.json npm init -y and will be used to compose the webpack configuration, a strategy I have learned at SurviveJS, at the part of the book. webpack.config.js webpack.parts.js Composing Configuration You should add this code to your file: index.html <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="quote">
      <p class="quote__text">Knowledge is freedom</p>
      <img class="quote__img1" src="./assets/images/bookshelf.png" alt="A bookshelf illustration" width="1280" height="640" />
    </div>
  </body>
</html> For now, the rest of the files are empty. As for the images, you can download them from the repository: . https://github.com/matheus4lves/blog_serve-static-files : The second image will be dynamically added later. Note Understanding the general configuration {#general-configuration} First, we need to install our basic development dependencies (devDependencies). Run the following command: . npm install --save-dev webpack webpack-cli webpack-dev-server webpack-marge This is why we need these packages: is, guess what, webpack. This is the core package. webpack allows us to further config webpack via CLI (terminal/prompt) and from our scripts. webpack-cli provides us with a local development server. webpack-dev-server facilitates composing configuration by basically merging objects and concatenating arrays, returning an object after the operations. webpack-merge webpack.config.js const { merge } = require("webpack-merge");
const path = require("path");

const commonConfig = merge([
  {
    entry: ["./app/assets/scripts/index.js"],
    output: {
      path: path.resolve(__dirname, "./build"),
      filename: "bundle.js",
    },
  },
]);

const configs = {
  development: merge([]),
  production: merge([]),
};

module.exports = (_, argv) => merge([commonConfig, configs[argv.mode], { mode: argv.mode }]); We start by splitting our configuration into three categories: common configuration, development configuration, and production configuration. Instead of exporting an object from the module, we export a function which gives us access to the arguments we pass to the command line or to our scripts. We want to do that because we want to get the from an argument. mode If we were to run the development server right now, we would have to run the following command from the CLI: . Instead, we’re going to set up two scripts that will help us develop and build our app. npx webpack serve --config webpack.config.js  --mode development Inside the property of your file, add  these lines right after the property: scripts package.json test "dev": "webpack serve --mode development",
"build": "webpack --mode production" Now, if we want to start the development server, we can simple run: . Much simpler, isn’t it? npm run dev For the time being we have the most basic configuration. We define an array of points (because we can have more than one) and the property which tells webpack the name of our bundle and the location it should be emitted to when we build the project. entry output Note that instead of exporting an object from the module we export a function, which gives us access to the object. This object contains the arguments that come from the CLI/scripts. Then, we access the property and create the configuration based on it. argv mode : To keep things simple I'll not touch the development and production configurations. Note Working with HTML {#loading-html} In this project we’re going to generate an file based on a . We can also use other types of templates, for instance, , , etc. We can, by the way, use no template at all, and generate our HTML based on plain JavaScript (As we will do later). .html .html template EJS handlebars Since we’re generating an static file based on a static file, the basic difference between our template and the generated file is that the generated file contains an tag with our bundle. .html .html script To be able to use an file as a template, we must make webpack understand HTML. To do so, we’ll set up the . .html html-loader Then, we’ll set up the so that it can generate the final for us. html-webpack-plugin .html Summarizing, we’ll read from an file to generate a file. Again, this is because we’re generating an static file based on a static file. In a more realistic situation, we would generate the file based on vanilla JavaScript (plain JavaScript) or based on a JavaScript library/templating language, thus generating static content based on dynamic content. .html .html .html Configuring the html-loader {#html-loader} First, install the by running . html-loader npm install --save-dev html-loader Then, add this function to : wepback.parts.js exports.loadHTML = () => ({
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
    ],
  },
}); This function returns an object literal that we have to merge to our configuration. Go to and add this line: webpack.config.js const parts = require("./webpack.parts"); Now, add a call to as the second element of the array passed as the argument of the function that is creating the : loadHTML() merge commonConfig const commonConfig = merge([
  {
    entry: ["./app/assets/scripts/index.js"],
    output: {
      path: path.resolve(__dirname, "./build"),
      filename: "bundle.js",
    },
  },
  parts.loadHTML(),
]); Webpack now understands HTML. If you run the development server and visit the address your project is running at, you’ll be able to see the image even though we haven’t set up webpack to work with images yet. If you want to understand why read about the loader in the section of this article. Important terms Configuring the html-webpack-plugin {#html-webpack-plugin} First, install the plugin by running . npm install --save-dev html-webpack-plugin Then, add this function to : webpack.parts.js exports.generateHTML = ({ template } = {}) => ({
  plugins: [new HtmlWebpackPlugin({ template })],
}); And, at the top of the same file, don’t forget to require the plugin: const HtmlWebpackPlugin = require("html-webpack-plugin"); Now, call this function right after the call to in : loadHTML() webpack.config.js parts.generateHTML({ template: "./app/index.html" }), Don’t forget to specify the template! If you run now, you should see an file inside the directory. npm run build index.html build Working with CSS {#loading-css} Two things are required in order to work with CSS: We have to make webpack understand CSS. We have to apply the CSS to the page. For the first step we need to install and config the . For the second we need to do the same with the . Since there’s no point in making webpack understand CSS without applying the styles to the page, we’re going to set up these loaders together. css-loader style-loader Configuring the css-loader and the style-loader {#css-loaders } Let’s start by installing the required packages. Run: . npm install --save-dev css-loader style-loader Then, add this to your : webpack.parts.js exports.loadCSS = () => ({
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}); this order is important because webpack reads the loaders from right to left. Note: As with the other functions we’ve exported from this module, we have to call it from . Therefore, add the following line right after the call to the function: webpack.config.js generateHTML() parts.loadCSS(), To test the configuration, add this to : styles.css body {
  background: #00ff00;
} And this to : index.js import "../styles/styles.css"; If you run the development server and visit the address the project is running at, you should see that the page has a green background. Working with images {#loading-images} If we wanted to work with images in webpack prior to its fifth version, we would have to set up the , but webpack 5 introduced , which we’re going to use instead. file-loader Asset Modules Using Asset Modules {#asset-modules} According to the official webpack documentation, Asset Modules is a type of module that allows one to use asset files (fonts, icons, etc) without configuring additional loaders. To allow webpack load images that are added, add this function to : dynamically webpack.config.js exports.loadImages = () => ({
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
}); Then, make a call to this function in : webpack.config.js parts.loadImages(), To test the configuration, let’s dynamically add the second image to our page: Update the to this: index.js import "../styles/styles.css";
import brokenHandcuffs from "../images/broken-handcuffs.png";

const img = document.createElement("img");
img.className = "quote__img2";
img.setAttribute("src", brokenHandcuffs);
img.setAttribute("alt", "Someone's upraised arms bound to the pieces of a handcuff that has just been broken.");
img.setAttribute("width", "817");
img.setAttribute("height", "460");

const imgContainer = document.querySelector(".quote");
imgContainer.appendChild(img); Webpack will process this image, which means that the image will be added to the directory ( , in our case) and the variable will contain the final URL of the image after processing. output build brokenHandcuffs If you run , you’ll see the file with the images in the directory. Notice how the name of the images have changed (The final URL matches the name of the images). npm run build index.html build If you run the development server, you should see both images on the page. In the next section we’ll update the CSS to make the page a bit prettier. Final touches {#final-touches} Update to this: styles.css .quote {
  height: 100vh;
  position: relative;
}

.quote__text {
  color: #175f73;
  font-size: 20px;
  position: absolute;
  bottom: 380px;
  left: 50%;
  transform: translateX(-55%);
}

.quote__img1 {
  width: 700px;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.quote__img2 {
  width: 400px;
  height: auto;
  position: absolute;
  bottom: 300px;
  left: 50%;
  transform: translateX(-50%);
} You should get this result: Summary {#summary} Here’s a list with the main points of this article: By default webpack only understands JavaScript. Therefore, if we want to work with static files we need to expand its functionality through loaders and plugins. If we want to work with HTML, we need to set up the and the . The former makes webpack understand HTML and allows us to use a file as a template while the latter automatically generates an HTML5 that includes all our bundles in the head using tags. html-loader html-webpack-plugin .html <script> To work with CSS we need to make webpack understand it first, by using the , and then tell webpack apply our styles to our pages, by configuring the . css-loader style-loader Since webpack 5, if we want to work with images we don’t need to set up additional loaders because webpack provides Asset Modules. We just need to set up the test condition and the proper type of resource. Conclusion {#conclusion} Thanks to its rich ecosystem of loaders and plugins webpack became much more than a module bundler,  allowing us to to things that would previously require a task manager and other tools. If you want to expand webpack’s functionality, this is the basic workflow: Install the loader or plugin you need. Configure it. I hope this tutorial is useful for you. Thanks for reading! You can find the source code of this project at this repo: . https://github.com/matheus4lves/blog_serve-static-files

2022 - HackerNoon Contributor of the Year - Html

Set Up Webpack 5 To Work With Static Files

Too Long; Didn't Read

Companies Mentioned

@matheus4lves

RELATED STORIES