mini-css-extract-plugin output overwritten

[deepaktatineni]

When css extract plugin is used along with entry file, the css file is overwritten by webpack boilerplate.

I have created a reproduce repository here.

[alexander-akait]

Entry name should be name, not path to output, please use output.path to configure output path, no need to use path as name, yes, it works in some cases, but it was not design for this usage

[alexander-akait]

Use new MiniCssExtractPlugin({ filename: 'css/app.css'})

[deepaktatineni]

This worked. Now I am able to prevent overwriting.

Now my config changed to below.

  entry: {
    app: './src/index.js',
    styles: './src/sass/style.scss'
  }

However, I am getting below output.

Hash: 3c35705b96c30665153f
Version: webpack 4.46.0
Time: 395ms
Built at: 02/25/2022 5:04:49 PM
                Asset      Size  Chunks             Chunk Names
  /public/css/app.css  1.56 KiB  styles  [emitted]  styles
                  app  3.85 KiB     app  [emitted]  app
public/texts/test.txt   0 bytes          [emitted]  
               styles     4 KiB  styles  [emitted]  styles
Entrypoint app = app
Entrypoint styles = /public/css/app.css styles
[./src/index.js] 20 bytes {app} [built]
[./src/sass/style.scss] 50 bytes {styles} [built]
    + 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--4-1!node_modules/sass-loader/dist/cjs.js!src/sass/style.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/dist/cjs.js!./src/sass/style.scss] ./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/sass-loader/dist/cjs.js!./src/sass/style.scss 1.99 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

Observe styles, app files without extensions.

I know this deviates from original issue, I can close this issue and open another if this breaks rules of the forum.

[alexander-akait]

Can you update to webpack v5?

[deepaktatineni]

No. As several plugins used in main repo with compatibility to webpack 5 need a node version upgrade to >-=12.x which is not an option at the moment.

[alexander-akait]

Can you try:

const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

const OUT_DIR = path.resolve(__dirname, 'out')
const PUBLIC_DIR = path.resolve(OUT_DIR, 'public')


module.exports = {
  mode: 'development',
  bail: true,
  entry: {
    'app': './src/index.js',
    'styles': './src/sass/style.scss'
  },
  output: {
    path: OUT_DIR,
    publicPath: PUBLIC_DIR,
    filename: '[name].js'
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {from: 'src/test.txt', to: 'public/texts/'}
      ]
    }),
    new MiniCssExtractPlugin({ filename: 'public/css/app.css'})
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: PUBLIC_DIR
            }
          },
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          },
          'sass-loader'
        ]
      },

    ]
  }
}