Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
extract-loader
Advanced tools
webpack loader to extract HTML and CSS from the bundle.
The extract-loader evaluates the given source code on the fly and returns the result as string. Its main use-case is to resolve urls within HTML and CSS coming from their respective loaders. Use the file-loader to emit the extract-loader's result as separate file.
import stylesheetUrl from "file-loader!extract-loader!css-loader!main.css";
// stylesheetUrl will now be the hashed url to the final stylesheet
The extract-loader works similar to the extract-text-webpack-plugin and is meant as a lean alternative to it. When evaluating the source code, it provides a fake context which was especially designed to cope with the code generated by the html- or the css-loader. Thus it might not work in other situations.
npm install extract-loader
Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or hot module replacement in development. In production, on the other hand, it's not a good idea to apply your stylesheets depending on JS execution. Rendering may be delayed or even a FOUC might be visible. Thus it's still better to have them as separate files in your final production build.
With the extract-loader, you are able to reference your main.css
as regular entry
. The following webpack.config.js
shows how to load your styles with the style-loader in development and as separate file in production.
const live = process.env.NODE_ENV === "production";
const mainCss = ["css-loader", path.join(__dirname, "app", "main.css")];
if (live) {
mainCss.unshift("file-loader?name=[name].[ext]", "extract-loader");
} else {
mainCss.unshift("style-loader");
}
module.exports = {
entry: [
path.join(__dirname, "app", "main.js"),
mainCss.join("!")
],
...
};
You can even add your index.html
as entry
and just reference your stylesheets from there. You just need to tell the html-loader to also pick up link:href
:
const indexHtml = path.join(__dirname, "app", "index.html");
module.exports = {
entry: [
path.join(__dirname, "app", "main.js"),
indexHtml
],
...
module: {
rules: [
{
test: indexHtml,
use: [
{
loader: "file-loader",
options: {
name: "[name]-dist.[ext]",
},
},
{
loader: "extract-loader",
},
{
loader: "html-loader",
options: {
attrs: ["img:src", "link:href"],
interpolate: true,
},
},
],
},
{
test: /\.css$/,
loaders: [
{
loader: "file-loader",
},
{
loader: "extract-loader",
},
{
loader: "css-loader",
},
],
},
{
test: /\.jpg$/,
loaders: [
{
loader: "file-loader"
},
],
},
]
}
};
turns
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<img src="hi.jpg">
</body>
</html>
into
<html>
<head>
<link href="7c57758b88216530ef48069c2a4c685a.css" type="text/css" rel="stylesheet">
</head>
<body>
<img src="6ac05174ae9b62257ff3aa8be43cf828.jpg">
</body>
</html>
There is currently exactly one option: publicPath
.
If you are using a relative publicPath
in webpack's output options and extracting to a file with the file-loader
, you might need this to account for the location of your extracted file.
Example:
module.exports = {
output: {
path: path.resolve("./dist"),
publicPath: "dist/"
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "file-loader",
options: {
name: "assets/[name].[ext]",
},
},
{
loader: "extract-loader",
options: {
publicPath: "../",
}
},
{
loader: "css-loader",
},
],
}
]
}
};
You need another option? Then you should think about:
From opening a bug report to creating a pull request: every contribution is appreciated and welcome. If you're planing to implement a new feature or change the api please create an issue first. This way we can ensure that your precious work is not in vain.
All pull requests should have 100% test coverage (with notable exceptions) and need to pass all tests.
npm test
to run the unit testsnpm run coverage
to check the test coverage (using istanbul)Unlicense
FAQs
webpack loader to extract HTML and CSS from the bundle
The npm package extract-loader receives a total of 42,498 weekly downloads. As such, extract-loader popularity was classified as popular.
We found that extract-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.