Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

extract-loader

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

extract-loader

webpack loader to extract HTML and CSS from the bundle

0.0.1
Source
npm

Version published: 9 years ago

Weekly downloads: 62K; increased by13.12%

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

extract-loader

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!extract!css!main.css";
// stylesheetUrl will now be the hashed url to the final stylesheet

The extract-loader works similiar 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.

Installation

npm install extract-loader

Examples

Extracting a main.css

Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or hot module replacement in development. 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.

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", path.join(__dirname, "app", "main.css")];

if (live) {
    mainCss.unshift("file?name=[name].[ext]", "extract");
} else {
    mainCss.unshift("style");
}

module.exports = {
    entry: [
        path.join(__dirname, "app", "main.js"),
        mainCss.join("!")
    ],
    ...
};

Extracting the index.html

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:

var indexHtml = path.join(__dirname, "app", "index.html");

module.exports = {
    entry: [
        path.join(__dirname, "app", "main.js"),
        indexHtml
    ],
    ...
    module: {
        loaders: [
            {
                test: indexHtml,
                loaders: [
                    "file?name=[name].[ext]",
                    "extract",
                    "html?" + JSON.stringify({
                        attrs: ["img:src", "link:href"]
                    })
                ]
            },
            {
                test: /\.css$/,
                loaders: [
                    "file",
                    "extract",
                    "css"
                ]
            },
            {
                test: /\.jpg$/,
                loader: "file"
            }
        ]
    }
};

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>

Options

The are currently no options.
You need one? Then you should think about:

Contributing

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.

Call npm test to run the unit tests
Call npm run coverage to check the test coverage (using istanbul)

License

Unlicense

Keywords

FAQs

What is extract-loader?

Is extract-loader popular?

Is extract-loader well maintained?

Package last updated on 25 Jan 2016

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.

Install