{"id":20024,"library":"extract-loader","title":"extract-loader","description":"A webpack loader that evaluates source code on the fly and returns it as a string, primarily used to extract HTML and CSS from the bundle. Version 5.1.0 is the latest stable release, with slow updates since 2020. It resolves URLs within HTML and CSS, serving as a lean alternative to extract-text-webpack-plugin and mini-css-extract-plugin. It works specifically with code generated by html-loader or css-loader, providing a fake context for evaluation.","status":"maintenance","version":"5.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/peerigon/extract-loader","tags":["javascript","webpack","loader","extract","html","css"],"install":[{"cmd":"npm install extract-loader","lang":"bash","label":"npm"},{"cmd":"yarn add extract-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add extract-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for transpiling ES module output from file-loader since v5.0.0","package":"babel-loader","optional":false}],"imports":[{"note":"The loader is used as a string in webpack config, not imported as a module.","wrong":"import extractLoader from 'extract-loader'","symbol":"extract-loader","correct":"import 'extract-loader'"},{"note":"In webpack config, use as a string in the use array. Options are passed via query or use object.","wrong":"use: ['file-loader', { loader: 'extract-loader' }]","symbol":"extract-loader (loader rule)","correct":"use: ['extract-loader']"},{"note":"extract-loader alone does not write files; it must be combined with file-loader to output the result.","wrong":"import url from 'extract-loader!css-loader!./file.css'","symbol":"file-loader","correct":"import url from 'file-loader!extract-loader!css-loader!./file.css'"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  entry: './src/main.css',\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'file-loader',\n          'extract-loader',\n          {\n            loader: 'css-loader',\n            options: { sourceMap: true }\n          }\n        ]\n      }\n    ]\n  }\n};\n\n// In HTML, include generated CSS file\n<link rel=\"stylesheet\" href=\"<%= require('file-loader!extract-loader!css-loader!./main.css') %>\">","lang":"javascript","description":"Demonstrates using extract-loader with file-loader and css-loader to extract CSS as a separate file for production."},"warnings":[{"fix":"Ensure Node is 6+ and install babel-loader as a dependency.","message":"v5.0.0 introduced Babel dependency for ES module support, requiring Node >= 6.0.0.","severity":"breaking","affected_versions":">=5.0.0 <6.0.0"},{"fix":"Switch to mini-css-extract-plugin (for CSS) or handle HTML extraction differently.","message":"extract-loader is in maintenance mode; consider using mini-css-extract-plugin for CSS extraction.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Ensure the loaded resource is processed by html-loader or css-loader before extraction.","message":"extract-loader only works with code from html-loader or css-loader; custom code may fail.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use use: ['file-loader', 'extract-loader', ...] in webpack config.","message":"The order of loaders matters: file-loader must come before extract-loader.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Node to 6+ or use v3.1.0.","message":"Node 6 support removed in v4.0.0; v3.x supports Node 6.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Reorder loaders: use ['file-loader', 'extract-loader', 'css-loader']","cause":"Loader order is incorrect; file-loader must precede extract-loader.","error":"Module build failed: Error: extract-loader can only be used after file-loader"},{"fix":"Install babel-loader: npm install --save-dev babel-loader","cause":"extract-loader v5+ requires babel-loader to transpile ES modules.","error":"Error: Cannot find module 'babel-loader'"},{"fix":"Ensure the loaded module is CSS or HTML processed by respective loaders.","cause":"extract-loader encountered non-standard code (e.g., not from css/html-loader).","error":"TypeError: Cannot read properties of undefined (reading 'indexOf')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}