title: Adding eslint-webpack-plugin into project to provide Typescript linting
body: <p>I am having a hard time plugging a Typescript linter in my Webpack project.</p>
  <p>Apparently <a href="https://github.com/webpack-contrib/eslint-loader" rel="noreferrer"><code>eslint-loader</code></a> is deprecated, they give <a href="https://github.com/webpack-contrib/eslint-webpack-plugin" rel="noreferrer"><code>eslint-webpack-plugin</code></a> as an alternative. Additionally, I am using <a href="https://github.com/typescript-eslint/typescript-eslint" rel="noreferrer"><code>typescript-eslint/parser</code></a> instead of <a href="https://github.com/palantir/tslint" rel="noreferrer"><code>tslint</code></a> (<em>deprecated</em>) The problem is the rules I set inside my <code>.eslintrc.js</code> don't seem to get accounted for. I have added a simple rule in <code>.eslintrc</code> that should throw an error when using a semicolon.</p>
  <pre class="lang-js prettyprint-override"><code>export default class A {
    static yes = 'this is static'; // &quot;;&quot; &lt;- should be invalidated by eslint
  }
  </code></pre>
  <p>My dependencies are:</p>
  <pre class="lang-js prettyprint-override"><code>&quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.5.0&quot;,
  &quot;@typescript-eslint/parser&quot;: &quot;^4.5.0&quot;,
  &quot;eslint&quot;: &quot;^7.11.0&quot;,
  &quot;eslint-webpack-plugin&quot;: &quot;^2.1.0&quot;,
  &quot;ts-loader&quot;: &quot;^8.0.6&quot;,
  &quot;typescript&quot;: &quot;^4.0.3&quot;,
  &quot;webpack&quot;: &quot;^4.41.3&quot;,
  &quot;webpack-cli&quot;: &quot;^3.3.10&quot;,
  &quot;webpack-dev-server&quot;: &quot;^3.9.0&quot;
  </code></pre>
  <p>If I understand correctly it should work like so:</p>
  <pre><code>                                                        # # # # # # # # # # # # # # 
  @typescript-eslint/parser --&gt; eslint-webpack-plugin --&gt; #                         # 
        (uses eslint?)        (replaces eslint-loader)    #       webpack v4        #
                                                          #  w/ webpack-dev-server  #
         typescript         --&gt;       ts-loader       --&gt; #                         #
                                                          # # # # # # # # # # # # # #
  </code></pre>
  <p>Side note: <em>I'm using <code>webpack-dev-server</code> instead of <a href="https://webpack.js.org/api/cli/" rel="noreferrer"><code>webpack-cli</code></a>'s serve command which <a href="https://github.com/webpack/webpack-dev-server/issues/2759" rel="noreferrer">doesn't seem to work quite yet with <code>webpack</code> v5</a></em>.</p>
  <p>The command I run to launch the server: <code>webpack-dev-server --hot --inline</code></p>
  <p><a href="https://i.stack.imgur.com/gPYnx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gPYnx.png" alt="enter image description here" /></a></p>
  <hr />
  <ul>
  <li>project structure:</li>
  </ul>
  <pre class="lang-MD prettyprint-override"><code>./
  ├─── src
  │    └─── index.ts
  └─── dist
       ├─── bundle.js
       └─── index.html &lt;- imports bundle.js
  </code></pre>
  <ul>
  <li><strong>webpack.config.js</strong>:</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>const path = require('path')
  const ESLintPlugin = require('eslint-webpack-plugin')
  
  module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    devServer: {
      contentBase: path.resolve(__dirname, 'dist')
      // publicPath: &quot;/assets&quot;, // path of the served resources (js, img, fonts...)
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      new ESLintPlugin({
        files: 'src/**/*.ts',
      })
    ],
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  }
  </code></pre>
  
  <ul>
  <li><strong>.eslintrc.js</strong>:</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    root: true,
    env: {
      node: true,
    },
    parser: '@typescript-eslint/parser',
    extends: [
      'plugin:@typescript-eslint/recommended'
    ],
    parserOptions: {
      ecmaVersion: 2020,
      sourceType: 'module',
    },
    rules: {
      'semi': ['error', 'never'],
    },
    ignorePatterns: [ &quot;dist/*&quot; ],
  }
  </code></pre>
  
  <ul>
  <li><strong>tsconfig.json</strong>:</li>
  </ul>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;esnext&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;strict&quot;: true,
      &quot;importHelpers&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;experimentalDecorators&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;baseUrl&quot;: &quot;.&quot;,
      &quot;paths&quot;: {
        &quot;@/*&quot;: [
          &quot;src/*&quot;
        ]
      },
      &quot;lib&quot;: [
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
      ]
    },
    &quot;include&quot;: [
      &quot;src/**/*.ts&quot;,
      &quot;tests/**/*.ts&quot;,
    ],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;
    ]
  }
  </code></pre>