Integrate ESLINT with Webpack

By Darío Rivera

Posted On in Webpack

One of the advantages of using webpack is that we can configure intermediate processes in the compilation of our assets. If you don't yet know what webpack is, I invite you to check out our Introduction to Webpack article and also the Introduction to ESLINT one. This is useful to prevent non-homogeneous code from passing to the version control system. To configure ESLINT with webpack, we must install a loader for ESLINT.

npm i --save-dev eslint-loader

Once this is done, we must configure the loader in the webpack.config.js file.

const path = require('path');
...

{
  module: {
    rules: [
      {
          test: /\.js/,
          loader: 'eslint-loader',
          enforce: 'pre',
          include: [path.resolve(__dirname, './src')]
      },
      ...
    ]
  }
}

As you can see, we are going to check that all files with the .js extension inside the src folder are parsed by eslint before generating the production assets (enforce: 'pre'). With this, we make sure that the code improved by the linter is the development code and not the production one. See you next time!

Categories