title: TypeError: compiler.plugin is not a function
body: <p>I'm trying to use Tailwind v2 into an old project that uses .tpl files. Not an issue as we're migrating to the world of SPAs. What I'm doing should work regardless.</p>
  <p>I'm using the following (literally taken from my package.json):</p>
  <ul>
  <li>&quot;autoprefixer&quot;: &quot;^10.2.5&quot;,</li>
  <li>&quot;babel-loader&quot;: &quot;^8.1.0&quot;,</li>
  <li>&quot;css-loader&quot;: &quot;^5.0.0&quot;,</li>
  <li>&quot;mini-css-extract-plugin&quot;: &quot;^1.5.0&quot;,</li>
  <li>&quot;extract-text-webpack-plugin&quot;: &quot;^3.0.2&quot;,</li>
  <li>&quot;postcss-loader&quot;: &quot;^5.2.0&quot;,</li>
  <li>&quot;postcss-preset-env&quot;: &quot;^6.7.0&quot;,</li>
  <li>&quot;webpack-merge&quot;: &quot;^5.7.3&quot;</li>
  <li>&quot;postcss&quot;: &quot;^8.2.12&quot;,</li>
  <li>&quot;sass&quot;: &quot;^1.27.0&quot;,</li>
  <li>&quot;sass-loader&quot;: &quot;^10.0.3&quot;,</li>
  <li>&quot;style-loader&quot;: &quot;^2.0.0&quot;,</li>
  <li>&quot;tailwindcss&quot;: &quot;^2.1.1&quot;,</li>
  <li>&quot;webpack&quot;: &quot;^5.35.0&quot;,</li>
  <li>&quot;webpack-cli&quot;: &quot;^4.6.0&quot;</li>
  </ul>
  <p><strong>webpack-merge</strong> is solely used to distinguish file names for production and development.</p>
  <p>Here's an exact copy of my webpack.config.js:</p>
  <pre class="lang-js prettyprint-override"><code>const path = require('path')
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  const ExtractTextPlugin = require(&quot;extract-text-webpack-plugin&quot;);
  const { SRC, DIST, ASSETS } = require('./paths')
  
  
  module.exports = {
    plugins: [
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: 'styles.css',
        chunkFilename: '[id].css',
      }), 
      new ExtractTextPlugin('styles.css', {
        disable: process.env.NODE_ENV === 'development',
      }),
    ],
  
    module: {
      rules: [
        {
          test: /\.(js)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        },
        {
            test: /\.s[ac]ss$/i,
            use: ExtractTextPlugin.extract({
              use: [{
                  loader: &quot;css-loader&quot;
              }, {
                  loader: &quot;sass-loader&quot;
              }, {
                loader: &quot;postcss-loader&quot;
              }],
              // use style-loader in development 
              fallback: &quot;style-loader&quot;
          })
        },
      ],
    },
    entry: {
      scripts: path.resolve(SRC, 'js', 'index.js')
    },
    output: {
      // Put all the bundled stuff in your dist folder
      path: DIST,
  
      // Our single entry point from above will be named &quot;scripts.js&quot;
      filename: '[name].js',
  
      // The output path as seen from the domain we're visiting in the browser
      publicPath: ASSETS
    },
  }
  </code></pre>
  <p>After running the build command, I get:</p>
  <blockquote>
  <p>TypeError: compiler.plugin is not a function</p>
  </blockquote>
  <p>Removing <code>new ExtractTextPlugin</code> from the <code>plugin</code>, the error is gone but another error comes up stating it's needed. I've also looked at <a href="https://github.com/tailwindlabs/webpack-starter/blob/master/webpack.config.js" rel="nofollow noreferrer">Tailwinds' example</a> but not having any luck. I've also looked at the <a href="https://v4.webpack.js.org/plugins/extract-text-webpack-plugin/" rel="nofollow noreferrer">ExtractTextWebpackPlugin</a> docs but.... no luck, same error.</p>
  <p>This project uses <code>*.scss, *.css, *.js, *.tpl, *.php</code></p>
  <p>Appreciate the help or pointers.</p>
  <p>Thanks.</p>