Caleb's Blog
The travails of using webpack

The travails of using webpack

Caleb Olojo's photo
Caleb Olojo
·

6 min read

Cover photo by Heather Morse on Unsplash

Most of the time, managing assets in a project that uses webpack to bundle its files can be very frustrating and tiresome.

In this article, I would list the common issues/problems I encountered while using webpack.

What you will be seeing most of the time in this article is a webpack config file, as it is what I'd be using to explain/illustrate these issues.

Let's get to the contents first.

I'm pretty sure you'd have seen a typical webpack configuration file. So there's no need for me to put a full block of code representing the config file here in this article, but I'd add snippets of the config that correlates with each point

Bundling and resolving of JSX modules

In a ReactJs project, there arises a need for you to place your components on a page (a webpage). For you to be able to do that you'd need to create a component representing that page in a file with the ".jsx" extension and then import your component(s) in it. Not that you can't do the same in a ".js" file, but just to follow React's standards.

On the first trial, you'd get an error because webpack (depending on the current version that you're using) wouldn't bundle files that have the .jsx extension unless you tell it explicitly to do so.

So, to resolve this issue, you would have to add this block of code into your webpack config file. As 

// webpack.config.js
module.exports = {
 resolve: { 
        modules: [
            'node_modules', 'src'
        ], 
        extensions: ['.jsx'] 
    },
}

Image shows in dev mode but not in production

This issue was the most stressful of them all, for me. Resolving this issue starts with using the right loader for bundling these types of files, as you know, images files can come in different formats, .jpg .jpeg`.png .svg.

To bundle these types of files, webpack requires us to use the file-loader to bundle such files. 

module: {
     rules: [
     {
      test:  /\.(gif|png|jpe?g|svg)$/i,
        use: {
          loader: "file-loader",                     
          options: {
            limit: 1000,
            name: "[name].[contenthash].[ext]",
            esModules: false
         }
       }                    
    }
  ]
}

The options object represents how the images would be placed in the build/dist folder.

The limit key represents the maximum amount of images that would be inside the build folder.

The esModules key is what actually helps us resolve the issue of images not displaying in production mode, normally, webpack treats all files as modules (including the images), so when we set the esModules key to false, it literally makes the images to be rendered in the DOM/production.

Unable to get "route" in development mode

Most of the time, react-router is what we most folks use to create independent routes for pages in a ReactJs application. But when a change is being made in the code editor and the browser gets refreshed, webpack throws an error "cannot GET /route", the route could be any component (i.e about, contact, services etc)

For you to resolve this issue, you'd have to set the historyAPI of webpack's dev server to true

    devServer: {
        historyApiFallback: true,
    }

CSS modules do not get bundled

This issue isn't really that big of a deal, when your CSS modules (files) are not being bundled for production, it has to do with the order of the respective loaders in the config file.

The "style-loader" should always come before the other loaders.

{
 test: /\.s[ac]ss$/,
 use: [
   "style-loader",
   "css-loader",
   "sass-loader"
 ]
},

Conclusion

I'm very sure these are just some of the issues that people encounter while using webpack, If you have other issues that you have faced in the past while using webpack. Please feel free to share them (and how you resolved them) in the comment section.

Also, here's the link to GitHub gist that contains the webpack config file. Feel free to use it.

You've come this far! Wow! I want to thank you for reading this article, I hope it has helped you gain an understanding of how you can resolve issues like this when you encounter them in the future. Kindly share it with your folks.

JavaScriptWeb Developmentwebpack