1 | extract-loader
|
2 | ==============
|
3 | **webpack loader to extract HTML and CSS from the bundle.**
|
4 |
|
5 | [![](https://img.shields.io/npm/v/extract-loader.svg)](https://www.npmjs.com/package/extract-loader)
|
6 | [![](https://img.shields.io/npm/dm/extract-loader.svg)](https://www.npmjs.com/package/extract-loader)
|
7 | [![Dependency Status](https://david-dm.org/peerigon/extract-loader.svg)](https://david-dm.org/peerigon/extract-loader)
|
8 | [![Build Status](https://travis-ci.org/peerigon/extract-loader.svg?branch=master)](https://travis-ci.org/peerigon/extract-loader)
|
9 | [![Coverage Status](https://img.shields.io/coveralls/peerigon/extract-loader.svg)](https://coveralls.io/r/peerigon/extract-loader?branch=master)
|
10 |
|
11 | 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](https://github.com/webpack/file-loader) to emit the extract-loader's result as separate file.
|
12 |
|
13 | ```javascript
|
14 | import stylesheetUrl from "file!extract!css!main.css";
|
15 | // stylesheetUrl will now be the hashed url to the final stylesheet
|
16 | ```
|
17 |
|
18 | The extract-loader works similiar to the [extract-text-webpack-plugin](https://github.com/webpack/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-](https://github.com/webpack/html-loader) or the [css-loader](https://github.com/webpack/css-loader). Thus it might not work in other situations.
|
19 |
|
20 | <br>
|
21 |
|
22 | Installation
|
23 | ------------------------------------------------------------------------
|
24 |
|
25 | `npm install extract-loader`
|
26 |
|
27 | <br>
|
28 |
|
29 | Examples
|
30 | ------------------------------------------------------------------------
|
31 |
|
32 | ### [Extracting a main.css](https://github.com/peerigon/extract-loader/tree/master/examples/main-css)
|
33 |
|
34 | Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or [hot module replacement](http://webpack.github.io/docs/hot-module-replacement-with-webpack.html) 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](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) might be visible. Thus it's still better to have them as separate files in your final production build.
|
35 |
|
36 | 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](https://github.com/webpack/style-loader) in development and as separate file in production.
|
37 |
|
38 | ```javascript
|
39 | const live = process.env.NODE_ENV === "production";
|
40 | const mainCss = ["css", path.join(__dirname, "app", "main.css")];
|
41 |
|
42 | if (live) {
|
43 | mainCss.unshift("file?name=[name].[ext]", "extract");
|
44 | } else {
|
45 | mainCss.unshift("style");
|
46 | }
|
47 |
|
48 | module.exports = {
|
49 | entry: [
|
50 | path.join(__dirname, "app", "main.js"),
|
51 | mainCss.join("!")
|
52 | ],
|
53 | ...
|
54 | };
|
55 | ```
|
56 |
|
57 | ### [Extracting the index.html](https://github.com/peerigon/extract-loader/tree/master/examples/index-html)
|
58 |
|
59 | 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`:
|
60 |
|
61 | ```javascript
|
62 | var indexHtml = path.join(__dirname, "app", "index.html");
|
63 |
|
64 | module.exports = {
|
65 | entry: [
|
66 | path.join(__dirname, "app", "main.js"),
|
67 | indexHtml
|
68 | ],
|
69 | ...
|
70 | module: {
|
71 | loaders: [
|
72 | {
|
73 | test: indexHtml,
|
74 | loaders: [
|
75 | "file?name=[name].[ext]",
|
76 | "extract",
|
77 | "html?" + JSON.stringify({
|
78 | attrs: ["img:src", "link:href"]
|
79 | })
|
80 | ]
|
81 | },
|
82 | {
|
83 | test: /\.css$/,
|
84 | loaders: [
|
85 | "file",
|
86 | "extract",
|
87 | "css"
|
88 | ]
|
89 | },
|
90 | {
|
91 | test: /\.jpg$/,
|
92 | loader: "file"
|
93 | }
|
94 | ]
|
95 | }
|
96 | };
|
97 | ```
|
98 |
|
99 | turns
|
100 |
|
101 | ```html
|
102 | <html>
|
103 | <head>
|
104 | <link href="main.css" type="text/css" rel="stylesheet">
|
105 | </head>
|
106 | <body>
|
107 | <img src="hi.jpg">
|
108 | </body>
|
109 | </html>
|
110 | ```
|
111 |
|
112 | into
|
113 |
|
114 |
|
115 | ```html
|
116 | <html>
|
117 | <head>
|
118 | <link href="7c57758b88216530ef48069c2a4c685a.css" type="text/css" rel="stylesheet">
|
119 | </head>
|
120 | <body>
|
121 | <img src="6ac05174ae9b62257ff3aa8be43cf828.jpg">
|
122 | </body>
|
123 | </html>
|
124 | ```
|
125 |
|
126 | <br>
|
127 |
|
128 | Options
|
129 | ------------------------------------------------------------------------
|
130 |
|
131 | The are currently no options.<br>
|
132 | You need one? Then you should think about:
|
133 |
|
134 | <br>
|
135 |
|
136 | Contributing
|
137 | ------------------------------------------------------------------------
|
138 |
|
139 | 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.
|
140 |
|
141 | All pull requests should have 100% test coverage (with notable exceptions) and need to pass all tests.
|
142 |
|
143 | - Call `npm test` to run the unit tests
|
144 | - Call `npm run coverage` to check the test coverage (using [istanbul](https://github.com/gotwarlost/istanbul))
|
145 |
|
146 | <br>
|
147 |
|
148 | License
|
149 | ------------------------------------------------------------------------
|
150 |
|
151 | Unlicense
|