Posted in Uncategorized

Don’t create a “styles.bundle.js” if entry point is a style file treated by a plugin (“extract-text-webpack-plugin” in this case)

   February 23, 2021  1 Comment on Don’t create a “styles.bundle.js” if entry point is a style file treated by a plugin (“extract-text-webpack-plugin” in this case)

Do you want to request a feature or report a bug?
[x] bug

What is the current behavior?
Given the following config, which has a “styles” entry, that points to a “scss” file: https://gist.github.com/MrCroft/9a1b1039ab44e5a4bb829abb663f85bb#file-webpack-config-js

Webpack generates a styles.min.css file in the dist/css folder, which is exactly what is desired.
But it also creates a styles.bundle.js file inside the dist/ folder – which isn’t needed.

If the current behavior is a bug, please provide the steps to reproduce.
It can be reproduced by simply running webpack on this config.
And this is my package.json file.

What is the expected behavior?
If an entry is a file (or an array of files) that is treated by a plugin (in this case – the “extract-text-webpack-plugin”), with the plugin generating the output, there shouldn’t exist a styles.bundle.js file in addition to the css file.

If this is a feature request, what is motivation or use case for changing the behavior?
I’m not sure if this would fall under the “feature request” or under the “bug” category. I’ve filled it as a “bug”.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
Node.js: 8.5.0
Webpack: 3.6.0
OS: Windows 10

Author: Fantashit

1 thought on “Don’t create a “styles.bundle.js” if entry point is a style file treated by a plugin (“extract-text-webpack-plugin” in this case)”

  1. I had the same “issue”! But I figured it out:

    If I have entrypoints defined like this:

      entry: {
    main: ["./src/scripts/main.js"],
    style: ["./src/styles/main.scss"]
  }

    Then the output is:

    Asset       Size  Chunks             Chunk Names
index.html  200 bytes          [emitted]  
main.bundle.js  987 bytes       0  [emitted]  main
style.bundle.js  966 bytes       1  [emitted]  style
style.css   22 bytes       1  [emitted]  style

    But if I define my entrypoints as:

      entry: {
    main: ["./src/scripts/main.js", "./src/styles/main.scss"]
  },

    Then the output is:

    Asset        Size  Chunks             Chunk Names
index.html   137 bytes          [emitted]  
main.bundle.js  1010 bytes       0  [emitted]  main
main.css    22 bytes       0  [emitted]  main

    Which is good! ✅

    But I’m not sure exactly why.. 🤔 It’s not specified in the docs https://webpack.js.org/configuration/entry-context/#entry

Comments are closed.