how to prevent mini-css-extract-plugin from creating a js entrypint

Question

I am relatively new to express + webpack, so i am unclear wether this is intended or not, and if not, how to properly configure it. the question is around the additional asset & entry point created when using the mini-css-extract-plugin.

webpack config:

Extract = require('mini-css-extract-plugin');
path = require('path');
Write = require('write-file-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    demo_scripts: path.resolve('server', 'scripts', 'demo.js'),
    demo_styles: path.resolve('server', 'styles', 'demo.css')
  },
  output: {
    path: path.resolve('.tmp'),
    filename: '[name].js'
  },
  plugins: [new Write(), new Extract()],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env']
            }
          }
        ]
      },
      {
        test: /\.css/,
        use: [
          {
            loader: Extract.loader
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  }
};

webpack output

          Asset      Size        Chunks             Chunk Names
demo_scripts.js  3.91 KiB  demo_scripts  [emitted]  demo_scripts
demo_styles.css  36 bytes   demo_styles  [emitted]  demo_styles
 demo_styles.js  3.89 KiB   demo_styles  [emitted]  demo_styles
Entrypoint demo_scripts = demo_scripts.js
Entrypoint demo_styles = demo_styles.css demo_styles.js

my question is, why is demo_styles.js being created? although the css is being extracted, it almost seems like webpack is still creating a bundled js with css, but when i view that file, the only line in it is

eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./server/styles/demo.css?");

can anyone help explain what is going on here?

UPDATE

if i remove the demo_styles entry point, and configure it via the plugin init, no css asset is built.

({
  plugins: [
    new Write(),
    new Extract({
      filename: 'demo_styles.css'
    })
  ]
});

---

Asset      Size        Chunks             Chunk Names
demo_scripts.js  3.91 KiB  demo_scripts  [emitted]  demo_scripts
Entrypoint demo_scripts = demo_scripts.js

the repo for this is here (note the express branch) https://github.com/brewster1134/bumper/tree/express

Answer 1

There are two workarounds for your problem. For both of them, you need to change the entry point of the Webpack configuration file. I, personally, prefer the first option.

Option 1:

Change the entry to the following:

entry: {
    demo: [
        path.resolve('server', 'scripts', 'demo.js'),
        path.resolve('server', 'styles', 'demo.css'),
    ]
}

This will generate the following outputs (based on the filename you provided for Extract class and output section:

• demo.js
• demo_styles.css

Option 2:

For this option, you need to remove the CSS file from the entry point and import it inside the JS file:

webpack.config.js

...
entry: path.resolve('server', 'scripts', 'demo.js'),
...

demo.js

import './../styles.demo.css'
//rest of your JS codes

This solution will generate the same output as Option1

Answer 2

Webpack pulls everything into a js file, then MiniCssExtractPlugin takes it out of that file, leaving a blank js file with // extracted by mini-css-extract-plugin.

My solution is to group your css and js in the entry section of webpack.config.js

entry: {
    demo: {
        import: [ path.join("server", "scripts", "demo.js"), path.join("server", "styles", "demo.css") ],
        filename: "demo.js", // outputs demo.js, demo.css to your output directory
    },
    main: {
        import: [ path.join("server", "scripts", "main.js"), path.join("server", "styles", "main.css") ],
        filename: "main.js", // outputs main.js, main.css to your output directory
    },
}

Also, so naming works well, use this for your plugins section:

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css"
    }),
],

Adjust the bundles "demo" and "main", as well as paths accordingly.

Answer 3

Please remove demo_styles from your entry point this is creating demo_styles.js.

instead you can inject css file like this:

plugins: [
      new MiniCssExtractPlugin({
        filename: 'demo_styles.css',
      }),

Let me know if the issue still persists, Happy to help