Support for default loader (file-loader) for unknown modules #7615

pravdomil · 2018-06-27T13:32:35Z

Feature request

from facebook/create-react-app#667 (comment):

A catchall unknown-source loader feels like it would be pretty beneficial.
My opinion is that you want it managed by webpack in some way or another.

What is the expected behavior?

Non-javascript files without loader will be handled by file-loader, this can be configured in module.fallbackLoader.

What is motivation or use case for adding/changing the behavior?

Nowadays you need to list all of extensions yourself:

{
  test: /\.(json|css|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/,
  loader: "file-loader",
}

How should this be implemented in your opinion?

// webpack.config.js

module.exports = {
  module: {
    fallbackLoader: {
      loader: "url-loader",
    }
  }
}

Are you willing to work on this yourself?
yes

The text was updated successfully, but these errors were encountered:

TheLarkInn · 2018-06-27T16:07:47Z

Should this be considered as a separate module type also? Something we may want to consider if no loaders applied.

alexander-akait · 2018-06-27T16:12:42Z

@TheLarkInn looks already in maybe https://github.com/webpack/webpack/projects/5#card-10666456 for webpack@5

sokra · 2018-06-28T14:52:41Z

While I think it makes more sense to list all extensions explicitly you can do a default loaders with the oneOf construct in module.rules:

module.rules: [{
  oneOf: [
    { test: /\.js/, ... },
    { test: /\.ts/, ... },
    { use: "file-loader" }
  ]
}]

https://webpack.js.org/configuration/module/#rule-oneof

pravdomil · 2018-06-28T16:22:58Z

well that's clever but for some reason it doesn't work with mini-css-extract-plugin

ERROR in ./src/style.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
          },
          {
            test: /\.css$/,
            use: [
              "mini-css-extract-plugin/dist/loader.js",
              "css-loader"
            ]
          },
          {
            use: "file-loader"
          }
        ]
      }
    ]
  },
  plugins: [new MiniCssExtractPlugin()]
};

src/index.js

import "./style.css";

stats.json

{
  "errors": [
    "./src/style.css\nModule build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nTypeError: __webpack_require__(...) is not a function\n    at Object.<anonymous> (./node_modules/css-loader/index.js!./src/style.css:98:50)\n    at __webpack_require__ (./node_modules/css-loader/index.js!./src/style.css:21:30)\n    at module.exports.module.exports (./node_modules/css-loader/index.js!./src/style.css:85:18)\n    at Object.<anonymous> (./node_modules/css-loader/index.js!./src/style.css:88:10)\n    at Module._compile (./node_modules/v8-compile-cache/v8-compile-cache.js:178:30)\n    at exec (./node_modules/mini-css-extract-plugin/dist/loader.js:55:10)\n    at childCompiler.runAsChild (./node_modules/mini-css-extract-plugin/dist/loader.js:133:14)\n    at compile (./node_modules/webpack/lib/Compiler.js:243:11)\n    at hooks.afterCompile.callAsync.err (./node_modules/webpack/lib/Compiler.js:500:14)\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\n    at compilation.seal.err (./node_modules/webpack/lib/Compiler.js:497:30)\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\n    at hooks.optimizeAssets.callAsync.err (./node_modules/webpack/lib/Compilation.js:995:35)\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\n    at hooks.optimizeChunkAssets.callAsync.err (./node_modules/webpack/lib/Compilation.js:986:32)\n    at _err0 (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)\n    at ./node_modules/uglifyjs-webpack-plugin/dist/index.js:282:11\n    at _class.runTasks (./node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)\n    at UglifyJsPlugin.optimizeFn (./node_modules/uglifyjs-webpack-plugin/dist/index.js:195:16)\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\n    at hooks.additionalAssets.callAsync.err (./node_modules/webpack/lib/Compilation.js:981:36)\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\n    at hooks.optimizeTree.callAsync.err (./node_modules/webpack/lib/Compilation.js:977:32)\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\n    at Compilation.seal (./node_modules/webpack/lib/Compilation.js:914:27)\n    at hooks.make.callAsync.err (./node_modules/webpack/lib/Compiler.js:494:17)\n    at _err0 (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)\n    at _addModuleChain (./node_modules/webpack/lib/Compilation.js:783:12)\n    at processModuleDependencies.err (./node_modules/webpack/lib/Compilation.js:722:9)\n    at process._tickCallback (internal/process/next_tick.js:61:11)\n @ ./src/index.js 1:0-21"
  ],
  "warnings": [
    "configuration\nThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.\nYou can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/"
  ],
  "version": "4.14.0",
  "hash": "ea6299e36625e28307d2",
  "time": 866,
  "builtAt": 1530528426430,
  "publicPath": "",
  "outputPath": "./dist",
  "assetsByChunkName": {
    "main": "main.js"
  },
  "assets": [
    {
      "name": "32634617ae3a4f18ec07bdf6e4903fe2.js",
      "size": 2260,
      "chunks": [],
      "chunkNames": []
    },
    {
      "name": "main.js",
      "size": 5561,
      "chunks": [
        0
      ],
      "chunkNames": [
        "main"
      ]
    }
  ],
  "filteredAssets": 0,
  "entrypoints": {
    "main": {
      "chunks": [
        0
      ],
      "assets": [
        "main.js"
      ],
      "children": {},
      "childAssets": {}
    }
  },
  "namedChunkGroups": {
    "main": {
      "chunks": [
        0
      ],
      "assets": [
        "main.js"
      ],
      "children": {},
      "childAssets": {}
    }
  },
  "chunks": [
    {
      "id": 0,
      "rendered": true,
      "initial": true,
      "entry": true,
      "size": 4611,
      "names": [
        "main"
      ],
      "files": [
        "main.js"
      ],
      "hash": "1be221368db4547a8529",
      "siblings": [],
      "parents": [],
      "children": [],
      "childrenByOrder": {},
      "modules": [
        {
          "id": 0,
          "identifier": "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/index.js!./src/style.css",
          "name": "./src/style.css",
          "index": 1,
          "index2": 0,
          "size": 4590,
          "cacheable": true,
          "built": true,
          "optional": false,
          "prefetched": false,
          "chunks": [
            0
          ],
          "issuer": "./node_modules/babel-loader/lib/index.js!./src/index.js",
          "issuerId": 1,
          "issuerName": "./src/index.js",
          "issuerPath": [
            {
              "id": 1,
              "identifier": "./node_modules/babel-loader/lib/index.js!./src/index.js",
              "name": "./src/index.js"
            }
          ],
          "failed": true,
          "errors": 1,
          "warnings": 0,
          "assets": [],
          "reasons": [
            {
              "moduleId": 1,
              "moduleIdentifier": "./node_modules/babel-loader/lib/index.js!./src/index.js",
              "module": "./src/index.js",
              "moduleName": "./src/index.js",
              "type": "harmony side effect evaluation",
              "userRequest": "./style.css",
              "loc": "1:0-21"
            }
          ],
          "usedExports": false,
          "providedExports": null,
          "optimizationBailout": [
            "ModuleConcatenation bailout: Module is not an ECMAScript module"
          ],
          "depth": 1,
          "source": "throw new Error(\"Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\\nTypeError: __webpack_require__(...) is not a function\\n    at Object.<anonymous> (./node_modules/css-loader/index.js!./src/style.css:98:50)\\n    at __webpack_require__ (./node_modules/css-loader/index.js!./src/style.css:21:30)\\n    at module.exports.module.exports (./node_modules/css-loader/index.js!./src/style.css:85:18)\\n    at Object.<anonymous> (./node_modules/css-loader/index.js!./src/style.css:88:10)\\n    at Module._compile (./node_modules/v8-compile-cache/v8-compile-cache.js:178:30)\\n    at exec (./node_modules/mini-css-extract-plugin/dist/loader.js:55:10)\\n    at childCompiler.runAsChild (./node_modules/mini-css-extract-plugin/dist/loader.js:133:14)\\n    at compile (./node_modules/webpack/lib/Compiler.js:243:11)\\n    at hooks.afterCompile.callAsync.err (./node_modules/webpack/lib/Compiler.js:500:14)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at compilation.seal.err (./node_modules/webpack/lib/Compiler.js:497:30)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at hooks.optimizeAssets.callAsync.err (./node_modules/webpack/lib/Compilation.js:995:35)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at hooks.optimizeChunkAssets.callAsync.err (./node_modules/webpack/lib/Compilation.js:986:32)\\n    at _err0 (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)\\n    at ./node_modules/uglifyjs-webpack-plugin/dist/index.js:282:11\\n    at _class.runTasks (./node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)\\n    at UglifyJsPlugin.optimizeFn (./node_modules/uglifyjs-webpack-plugin/dist/index.js:195:16)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at hooks.additionalAssets.callAsync.err (./node_modules/webpack/lib/Compilation.js:981:36)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at hooks.optimizeTree.callAsync.err (./node_modules/webpack/lib/Compilation.js:977:32)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at Compilation.seal (./node_modules/webpack/lib/Compilation.js:914:27)\\n    at hooks.make.callAsync.err (./node_modules/webpack/lib/Compiler.js:494:17)\\n    at _err0 (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)\\n    at _addModuleChain (./node_modules/webpack/lib/Compilation.js:783:12)\\n    at processModuleDependencies.err (./node_modules/webpack/lib/Compilation.js:722:9)\\n    at process._tickCallback (internal/process/next_tick.js:61:11)\");"
        },
        {
          "id": 1,
          "identifier": "./node_modules/babel-loader/lib/index.js!./src/index.js",
          "name": "./src/index.js",
          "index": 0,
          "index2": 1,
          "size": 21,
          "cacheable": true,
          "built": true,
          "optional": false,
          "prefetched": false,
          "chunks": [
            0
          ],
          "issuer": null,
          "issuerId": null,
          "issuerName": null,
          "issuerPath": null,
          "failed": false,
          "errors": 0,
          "warnings": 0,
          "assets": [],
          "reasons": [
            {
              "moduleId": null,
              "moduleIdentifier": null,
              "module": null,
              "moduleName": null,
              "type": "single entry",
              "userRequest": "./src",
              "loc": "main"
            }
          ],
          "usedExports": true,
          "providedExports": [],
          "optimizationBailout": [
            "ModuleConcatenation bailout: Module is an entry point"
          ],
          "depth": 0,
          "source": "import \"./style.css\";"
        }
      ],
      "filteredModules": 0,
      "origins": [
        {
          "module": "",
          "moduleIdentifier": "",
          "moduleName": "",
          "loc": "main",
          "request": "./src",
          "reasons": []
        }
      ]
    }
  ],
  "modules": [
    {
      "id": 0,
      "identifier": "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/index.js!./src/style.css",
      "name": "./src/style.css",
      "index": 1,
      "index2": 0,
      "size": 4590,
      "cacheable": true,
      "built": true,
      "optional": false,
      "prefetched": false,
      "chunks": [
        0
      ],
      "issuer": "./node_modules/babel-loader/lib/index.js!./src/index.js",
      "issuerId": 1,
      "issuerName": "./src/index.js",
      "issuerPath": [
        {
          "id": 1,
          "identifier": "./node_modules/babel-loader/lib/index.js!./src/index.js",
          "name": "./src/index.js"
        }
      ],
      "failed": true,
      "errors": 1,
      "warnings": 0,
      "assets": [],
      "reasons": [
        {
          "moduleId": 1,
          "moduleIdentifier": "./node_modules/babel-loader/lib/index.js!./src/index.js",
          "module": "./src/index.js",
          "moduleName": "./src/index.js",
          "type": "harmony side effect evaluation",
          "userRequest": "./style.css",
          "loc": "1:0-21"
        }
      ],
      "usedExports": false,
      "providedExports": null,
      "optimizationBailout": [
        "ModuleConcatenation bailout: Module is not an ECMAScript module"
      ],
      "depth": 1,
      "source": "throw new Error(\"Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\\nTypeError: __webpack_require__(...) is not a function\\n    at Object.<anonymous> (./node_modules/css-loader/index.js!./src/style.css:98:50)\\n    at __webpack_require__ (./node_modules/css-loader/index.js!./src/style.css:21:30)\\n    at module.exports.module.exports (./node_modules/css-loader/index.js!./src/style.css:85:18)\\n    at Object.<anonymous> (./node_modules/css-loader/index.js!./src/style.css:88:10)\\n    at Module._compile (./node_modules/v8-compile-cache/v8-compile-cache.js:178:30)\\n    at exec (./node_modules/mini-css-extract-plugin/dist/loader.js:55:10)\\n    at childCompiler.runAsChild (./node_modules/mini-css-extract-plugin/dist/loader.js:133:14)\\n    at compile (./node_modules/webpack/lib/Compiler.js:243:11)\\n    at hooks.afterCompile.callAsync.err (./node_modules/webpack/lib/Compiler.js:500:14)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at compilation.seal.err (./node_modules/webpack/lib/Compiler.js:497:30)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at hooks.optimizeAssets.callAsync.err (./node_modules/webpack/lib/Compilation.js:995:35)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at hooks.optimizeChunkAssets.callAsync.err (./node_modules/webpack/lib/Compilation.js:986:32)\\n    at _err0 (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)\\n    at ./node_modules/uglifyjs-webpack-plugin/dist/index.js:282:11\\n    at _class.runTasks (./node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)\\n    at UglifyJsPlugin.optimizeFn (./node_modules/uglifyjs-webpack-plugin/dist/index.js:195:16)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at hooks.additionalAssets.callAsync.err (./node_modules/webpack/lib/Compilation.js:981:36)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at hooks.optimizeTree.callAsync.err (./node_modules/webpack/lib/Compilation.js:977:32)\\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)\\n    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (./node_modules/tapable/lib/Hook.js:35:21)\\n    at Compilation.seal (./node_modules/webpack/lib/Compilation.js:914:27)\\n    at hooks.make.callAsync.err (./node_modules/webpack/lib/Compiler.js:494:17)\\n    at _err0 (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)\\n    at _addModuleChain (./node_modules/webpack/lib/Compilation.js:783:12)\\n    at processModuleDependencies.err (./node_modules/webpack/lib/Compilation.js:722:9)\\n    at process._tickCallback (internal/process/next_tick.js:61:11)\");"
    },
    {
      "id": 1,
      "identifier": "./node_modules/babel-loader/lib/index.js!./src/index.js",
      "name": "./src/index.js",
      "index": 0,
      "index2": 1,
      "size": 21,
      "cacheable": true,
      "built": true,
      "optional": false,
      "prefetched": false,
      "chunks": [
        0
      ],
      "issuer": null,
      "issuerId": null,
      "issuerName": null,
      "issuerPath": null,
      "failed": false,
      "errors": 0,
      "warnings": 0,
      "assets": [],
      "reasons": [
        {
          "moduleId": null,
          "moduleIdentifier": null,
          "module": null,
          "moduleName": null,
          "type": "single entry",
          "userRequest": "./src",
          "loc": "main"
        }
      ],
      "usedExports": true,
      "providedExports": [],
      "optimizationBailout": [
        "ModuleConcatenation bailout: Module is an entry point"
      ],
      "depth": 0,
      "source": "import \"./style.css\";"
    }
  ],
  "filteredModules": 0,
  "children": [
    {
      "errors": [],
      "warnings": [],
      "publicPath": "",
      "outputPath": "./dist",
      "assetsByChunkName": {},
      "assets": [
        {
          "name": "32634617ae3a4f18ec07bdf6e4903fe2.js",
          "size": 2260,
          "chunks": [],
          "chunkNames": []
        }
      ],
      "filteredAssets": 0,
      "entrypoints": {
        "mini-css-extract-plugin": {
          "chunks": [
            0
          ],
          "assets": [
            "*"
          ],
          "children": {},
          "childAssets": {}
        }
      },
      "namedChunkGroups": {
        "mini-css-extract-plugin": {
          "chunks": [
            0
          ],
          "assets": [
            "*"
          ],
          "children": {},
          "childAssets": {}
        }
      },
      "chunks": [
        {
          "id": 0,
          "rendered": true,
          "initial": true,
          "entry": true,
          "size": 265,
          "names": [
            "mini-css-extract-plugin"
          ],
          "files": [
            "*"
          ],
          "hash": "3716ea1b8286787cc45e",
          "siblings": [],
          "parents": [],
          "children": [],
          "childrenByOrder": {},
          "modules": [
            {
              "id": 0,
              "identifier": "./node_modules/file-loader/dist/cjs.js!./node_modules/css-loader/lib/css-base.js",
              "name": "./node_modules/css-loader/lib/css-base.js",
              "index": 1,
              "index2": 0,
              "size": 81,
              "cacheable": true,
              "built": true,
              "optional": false,
              "prefetched": false,
              "chunks": [
                0
              ],
              "issuer": "./node_modules/css-loader/index.js!./src/style.css",
              "issuerId": 1,
              "issuerName": "./node_modules/css-loader!./src/style.css",
              "issuerPath": [
                {
                  "id": 1,
                  "identifier": "./node_modules/css-loader/index.js!./src/style.css",
                  "name": "./node_modules/css-loader!./src/style.css"
                }
              ],
              "failed": false,
              "errors": 0,
              "warnings": 0,
              "assets": [
                "32634617ae3a4f18ec07bdf6e4903fe2.js"
              ],
              "reasons": [
                {
                  "moduleId": 1,
                  "moduleIdentifier": "./node_modules/css-loader/index.js!./src/style.css",
                  "module": "./node_modules/css-loader!./src/style.css",
                  "moduleName": "./node_modules/css-loader!./src/style.css",
                  "type": "cjs require",
                  "userRequest": "../node_modules/css-loader/lib/css-base.js",
                  "loc": "1:27-80"
                }
              ],
              "usedExports": true,
              "providedExports": null,
              "optimizationBailout": [
                "ModuleConcatenation bailout: Module is not an ECMAScript module"
              ],
              "depth": 1,
              "source": "module.exports = __webpack_public_path__ + \"32634617ae3a4f18ec07bdf6e4903fe2.js\";"
            },
            {
              "id": 1,
              "identifier": "./node_modules/css-loader/index.js!./src/style.css",
              "name": "./node_modules/css-loader!./src/style.css",
              "index": 0,
              "index2": 1,
              "size": 184,
              "cacheable": true,
              "built": true,
              "optional": false,
              "prefetched": false,
              "chunks": [
                0
              ],
              "issuer": null,
              "issuerId": null,
              "issuerName": null,
              "issuerPath": null,
              "failed": false,
              "errors": 0,
              "warnings": 0,
              "assets": [],
              "reasons": [
                {
                  "moduleId": null,
                  "moduleIdentifier": null,
                  "module": null,
                  "moduleName": null,
                  "type": "single entry",
                  "userRequest": "!!./node_modules/css-loader/index.js!./src/style.css",
                  "loc": "mini-css-extract-plugin"
                }
              ],
              "usedExports": true,
              "providedExports": null,
              "optimizationBailout": [
                "ModuleConcatenation bailout: Module is not an ECMAScript module"
              ],
              "depth": 0,
              "source": "exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"body { color: hotpink }\\n\", \"\"]);\n\n// exports\n"
            }
          ],
          "filteredModules": 0,
          "origins": [
            {
              "module": "",
              "moduleIdentifier": "",
              "moduleName": "",
              "loc": "mini-css-extract-plugin",
              "request": "!!./node_modules/css-loader/index.js!./src/style.css",
              "reasons": []
            }
          ]
        }
      ],
      "modules": [
        {
          "id": 0,
          "identifier": "./node_modules/file-loader/dist/cjs.js!./node_modules/css-loader/lib/css-base.js",
          "name": "./node_modules/css-loader/lib/css-base.js",
          "index": 1,
          "index2": 0,
          "size": 81,
          "cacheable": true,
          "built": true,
          "optional": false,
          "prefetched": false,
          "chunks": [
            0
          ],
          "issuer": "./node_modules/css-loader/index.js!./src/style.css",
          "issuerId": 1,
          "issuerName": "./node_modules/css-loader!./src/style.css",
          "issuerPath": [
            {
              "id": 1,
              "identifier": "./node_modules/css-loader/index.js!./src/style.css",
              "name": "./node_modules/css-loader!./src/style.css"
            }
          ],
          "failed": false,
          "errors": 0,
          "warnings": 0,
          "assets": [
            "32634617ae3a4f18ec07bdf6e4903fe2.js"
          ],
          "reasons": [
            {
              "moduleId": 1,
              "moduleIdentifier": "./node_modules/css-loader/index.js!./src/style.css",
              "module": "./node_modules/css-loader!./src/style.css",
              "moduleName": "./node_modules/css-loader!./src/style.css",
              "type": "cjs require",
              "userRequest": "../node_modules/css-loader/lib/css-base.js",
              "loc": "1:27-80"
            }
          ],
          "usedExports": true,
          "providedExports": null,
          "optimizationBailout": [
            "ModuleConcatenation bailout: Module is not an ECMAScript module"
          ],
          "depth": 1,
          "source": "module.exports = __webpack_public_path__ + \"32634617ae3a4f18ec07bdf6e4903fe2.js\";"
        },
        {
          "id": 1,
          "identifier": "./node_modules/css-loader/index.js!./src/style.css",
          "name": "./node_modules/css-loader!./src/style.css",
          "index": 0,
          "index2": 1,
          "size": 184,
          "cacheable": true,
          "built": true,
          "optional": false,
          "prefetched": false,
          "chunks": [
            0
          ],
          "issuer": null,
          "issuerId": null,
          "issuerName": null,
          "issuerPath": null,
          "failed": false,
          "errors": 0,
          "warnings": 0,
          "assets": [],
          "reasons": [
            {
              "moduleId": null,
              "moduleIdentifier": null,
              "module": null,
              "moduleName": null,
              "type": "single entry",
              "userRequest": "!!./node_modules/css-loader/index.js!./src/style.css",
              "loc": "mini-css-extract-plugin"
            }
          ],
          "usedExports": true,
          "providedExports": null,
          "optimizationBailout": [
            "ModuleConcatenation bailout: Module is not an ECMAScript module"
          ],
          "depth": 0,
          "source": "exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"body { color: hotpink }\\n\", \"\"]);\n\n// exports\n"
        }
      ],
      "filteredModules": 0,
      "children": [],
      "name": "mini-css-extract-plugin node_modules/css-loader/index.js!src/style.css"
    }
  ]
}

sokra · 2018-06-29T14:28:16Z

hmm... seem like some file is loaded with the file-loader which should not be loaded with it...

Do you have the stats output of the child compilation?

pravdomil · 2018-07-02T10:13:58Z

I have updated previous comment.

sokra · 2018-07-02T11:16:01Z

Your config loads all .js files that are in node_modules with the file-loader (because of the first rule). That's wrong.

Maybe add a rule like that { test: /\.js$/ } just before the fallback rule:

pravdomil · 2018-07-02T11:57:05Z

make sense, now it works, that solves problem for me, thanks for help, final config:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
          },
          {
            test: /\.css$/,
            use: ["mini-css-extract-plugin/dist/loader.js", "css-loader"]
          },
          {
            exclude: /\.(js|mjs|json|wasm)$/,
            use: "file-loader"
          }
        ]
      }
    ]
  },
  plugins: [new MiniCssExtractPlugin()]
};

Webpack block

webpack-bot · 2018-12-31T20:01:54Z

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

alexander-akait · 2019-01-04T12:36:07Z

Bump

webpack-bot · 2019-07-06T02:51:54Z

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

alexander-akait · 2019-07-06T12:22:42Z

Bump, maybe we can do this for webpack@5
/cc @sokra

terrylinooo · 2019-09-20T07:25:55Z

I don't why exclude: /node_modules/, but it solved my problem.

webpack-bot · 2019-12-21T06:41:58Z

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

edmorley · 2019-12-21T08:01:32Z

Unstale

alexander-akait · 2020-03-25T11:45:37Z

bump

webpack-bot · 2020-07-09T15:51:56Z

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

webpack-bot added the inactive label Dec 31, 2018

webpack-bot removed the inactive label Jan 4, 2019

webpack-bot added the inactive label Jul 6, 2019

webpack-bot removed the inactive label Jul 6, 2019

webpack-bot added the inactive label Dec 21, 2019

webpack-bot removed the inactive label Dec 21, 2019

webpack-bot added the inactive label Mar 21, 2020

webpack-bot removed the inactive label Mar 25, 2020

webpack-bot added the inactive label Jun 24, 2020

webpack-bot closed this as completed Jul 9, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for default loader (file-loader) for unknown modules #7615

Support for default loader (file-loader) for unknown modules #7615

pravdomil commented Jun 27, 2018 •

edited

Loading

TheLarkInn commented Jun 27, 2018

alexander-akait commented Jun 27, 2018

sokra commented Jun 28, 2018

pravdomil commented Jun 28, 2018 •

edited

Loading

sokra commented Jun 29, 2018

pravdomil commented Jul 2, 2018 •

edited

Loading

sokra commented Jul 2, 2018

pravdomil commented Jul 2, 2018 •

edited

Loading

webpack-bot commented Dec 31, 2018

alexander-akait commented Jan 4, 2019

webpack-bot commented Jul 6, 2019

alexander-akait commented Jul 6, 2019

terrylinooo commented Sep 20, 2019

webpack-bot commented Dec 21, 2019

edmorley commented Dec 21, 2019

alexander-akait commented Mar 25, 2020

webpack-bot commented Jul 9, 2020

Support for default loader (file-loader) for unknown modules #7615

Support for default loader (file-loader) for unknown modules #7615

Comments

pravdomil commented Jun 27, 2018 • edited Loading

Feature request

TheLarkInn commented Jun 27, 2018

alexander-akait commented Jun 27, 2018

sokra commented Jun 28, 2018

pravdomil commented Jun 28, 2018 • edited Loading

sokra commented Jun 29, 2018

pravdomil commented Jul 2, 2018 • edited Loading

sokra commented Jul 2, 2018

pravdomil commented Jul 2, 2018 • edited Loading

webpack-bot commented Dec 31, 2018

alexander-akait commented Jan 4, 2019

webpack-bot commented Jul 6, 2019

alexander-akait commented Jul 6, 2019

terrylinooo commented Sep 20, 2019

webpack-bot commented Dec 21, 2019

edmorley commented Dec 21, 2019

alexander-akait commented Mar 25, 2020

webpack-bot commented Jul 9, 2020

pravdomil commented Jun 27, 2018 •

edited

Loading

pravdomil commented Jun 28, 2018 •

edited

Loading

pravdomil commented Jul 2, 2018 •

edited

Loading

pravdomil commented Jul 2, 2018 •

edited

Loading