Skip to content

Commit 8f56c2f

Browse files
jhnnsjhnns
authored
feat: Add source map support (#43)
Fixes #1
1 parent c5aff66 commit 8f56c2f

File tree

13 files changed

+11510
-17240
lines changed

13 files changed

+11510
-17240
lines changed

‎.babelrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"env",
55
{
66
"targets": {
7-
"node": 4
7+
"node": 6
88
}
99
}
1010
]
@@ -13,6 +13,7 @@
1313
"transform-runtime"
1414
],
1515
"sourceMaps": true,
16+
"retainLines": true,
1617
"env": {
1718
"test": {
1819
"plugins": ["istanbul"]

‎README.md‎

Lines changed: 92 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import stylesheetUrl from "file-loader!extract-loader!css-loader!main.css";
1515
// stylesheetUrl will now be the hashed url to the final stylesheet
1616
```
1717

18-
The extract-loader works similar 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.
18+
The extract-loader works similar to the [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) and the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-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.
1919

2020
<br>
2121

@@ -36,21 +36,36 @@ Bundling CSS with webpack has some nice advantages like referencing images and f
3636
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.
3737

3838
```js
39-
const live = process.env.NODE_ENV === "production";
40-
const mainCss = ["css-loader", path.join(__dirname, "app", "main.css")];
41-
42-
if (live) {
43-
mainCss.unshift("file-loader?name=[name].[ext]", "extract-loader");
44-
} else {
45-
mainCss.unshift("style-loader");
46-
}
39+
module.exports = ({ mode }) => {
40+
const pathToMainCss = require.resolve("./app/main.css");
41+
const loaders = [{
42+
loader: "css-loader",
43+
options: {
44+
sourceMap: true
45+
}
46+
}];
47+
48+
if (mode === "production") {
49+
loaders.unshift(
50+
"file-loader",
51+
"extract-loader"
52+
);
53+
} else {
54+
loaders.unshift("style-loader");
55+
}
4756

48-
module.exports = {
49-
entry: [
50-
path.join(__dirname, "app", "main.js"),
51-
mainCss.join("!")
52-
],
53-
...
57+
return {
58+
mode,
59+
entry: pathToMainCss,
60+
module: {
61+
rules: [
62+
{
63+
test: pathToMainCss,
64+
loaders: loaders
65+
},
66+
]
67+
}
68+
};
5469
};
5570
```
5671

@@ -59,62 +74,52 @@ module.exports = {
5974
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`:
6075

6176
```js
62-
const 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-
rules: [
72-
{
73-
test: indexHtml,
74-
use: [
75-
{
76-
loader: "file-loader",
77-
options: {
78-
name: "[name]-dist.[ext]",
79-
},
80-
},
81-
{
82-
loader: "extract-loader",
83-
},
84-
{
85-
loader: "html-loader",
86-
options: {
87-
attrs: ["img:src", "link:href"],
88-
interpolate: true,
89-
},
90-
},
91-
],
92-
},
93-
{
94-
test: /\.css$/,
95-
loaders: [
96-
{
97-
loader: "file-loader",
98-
},
99-
{
100-
loader: "extract-loader",
101-
},
102-
{
103-
loader: "css-loader",
104-
},
105-
],
106-
},
107-
{
108-
test: /\.jpg$/,
109-
loaders: [
110-
{
111-
loader: "file-loader"
112-
},
113-
],
114-
},
115-
]
116-
}
117-
};
77+
module.exports = ({ mode }) => {
78+
const pathToMainJs = require.resolve("./app/main.js");
79+
const pathToIndexHtml = require.resolve("./app/index.html");
80+
81+
return {
82+
mode,
83+
entry: [
84+
pathToMainJs,
85+
pathToIndexHtml
86+
],
87+
module: {
88+
rules: [
89+
{
90+
test: pathToIndexHtml,
91+
use: [
92+
"file-loader",
93+
"extract-loader",
94+
{
95+
loader: "html-loader",
96+
options: {
97+
attrs: ["img:src", "link:href"]
98+
}
99+
}
100+
]
101+
},
102+
{
103+
test: /\.css$/,
104+
use: [
105+
"file-loader",
106+
"extract-loader",
107+
{
108+
loader: "css-loader",
109+
options: {
110+
sourceMap: true
111+
}
112+
}
113+
]
114+
},
115+
{
116+
test: /\.jpg$/,
117+
use: "file-loader"
118+
}
119+
]
120+
}
121+
};
122+
}
118123
```
119124

120125
turns
@@ -146,6 +151,22 @@ into
146151

147152
<br>
148153

154+
Source Maps
155+
------------------------------------------------------------------------
156+
157+
If you want source maps in your extracted CSS files, you need to set the [`sourceMap` option](https://github.com/webpack-contrib/css-loader#sourcemap) of the **css-loader**:
158+
159+
```js
160+
{
161+
loader: "css-loader",
162+
options: {
163+
sourceMap: true
164+
}
165+
}
166+
```
167+
168+
<br>
169+
149170
Options
150171
------------------------------------------------------------------------
151172

‎examples/index-html/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "index-html",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "webpack.config.js",
6+
"scripts": {
7+
"build": "../../node_modules/.bin/webpack --mode production"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC"
12+
}

‎examples/index-html/webpack.config.js‎

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,50 @@
1-
var path = require("path");
1+
"use strict";
22

3-
var indexHtml = path.join(__dirname, "app", "index.html");
3+
module.exports = ({ mode }) => {
4+
const pathToMainJs = require.resolve("./app/main.js");
5+
const pathToIndexHtml = require.resolve("./app/index.html");
46

5-
module.exports = {
6-
mode: "development",
7-
entry: [
8-
path.join(__dirname, "app", "main.js"),
9-
indexHtml
10-
],
11-
output: {
12-
path: path.join(__dirname, "dist"),
13-
filename: "bundle.js"
14-
},
15-
module: {
16-
rules: [
17-
{
18-
test: indexHtml,
19-
use: [
20-
{
21-
loader: "file-loader",
22-
options: {
23-
name: "[name].[ext]"
7+
return {
8+
mode,
9+
entry: [
10+
pathToMainJs,
11+
pathToIndexHtml
12+
],
13+
module: {
14+
rules: [
15+
{
16+
test: pathToIndexHtml,
17+
use: [
18+
"file-loader",
19+
// should be just "extract-loader" in your case
20+
require.resolve("../../lib/extractLoader.js"),
21+
{
22+
loader: "html-loader",
23+
options: {
24+
attrs: ["img:src", "link:href"]
25+
}
2426
}
25-
},
26-
path.resolve(__dirname, "..", "..", "lib", "extractLoader.js"),
27-
{
28-
loader: "html-loader",
29-
options: {
30-
attrs: ["img:src", "link:href"]
27+
]
28+
},
29+
{
30+
test: /\.css$/,
31+
use: [
32+
"file-loader",
33+
// should be just "extract-loader" in your case
34+
require.resolve("../../lib/extractLoader.js"),
35+
{
36+
loader: "css-loader",
37+
options: {
38+
sourceMap: true
39+
}
3140
}
32-
}
33-
]
34-
},
35-
{
36-
test: /\.css$/,
37-
use: [
38-
"file-loader",
39-
path.resolve(__dirname, "..", "..", "lib", "extractLoader.js"),
40-
"css-loader"
41-
]
42-
},
43-
{
44-
test: /\.jpg$/,
45-
use: "file-loader"
46-
}
47-
]
48-
}
41+
]
42+
},
43+
{
44+
test: /\.jpg$/,
45+
use: "file-loader"
46+
}
47+
]
48+
}
49+
};
4950
};

‎examples/main-css/app/main.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/main-css/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="UTF-8">
55
<title>Main CSS Example</title>
66
<link href="dist/main.css" type="text/css" rel="stylesheet">
7-
<script src="dist/bundle.js"></script>
87
</head>
98
<body></body>
109
</html>

‎examples/main-css/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "main-css",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "webpack.config.js",
6+
"scripts": {
7+
"build": "../../node_modules/.bin/webpack --mode production"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC"
12+
}

‎examples/main-css/webpack.config.js‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
1-
var path = require("path");
1+
"use strict";
22

3-
var live = process.env.NODE_ENV === "production";
4-
var mainCss = ["css-loader", path.join(__dirname, "app", "main.css")];
3+
module.exports = ({ mode }) => {
4+
const pathToMainCss = require.resolve("./app/main.css");
5+
const loaders = [{
6+
loader: "css-loader",
7+
options: {
8+
sourceMap: true
9+
}
10+
}];
511

6-
if (live) {
7-
mainCss.unshift(
8-
"file-loader?name=[name].[ext]",
9-
path.resolve(__dirname, "..", "..", "lib", "extractLoader.js") // should be just "extract" in your case
10-
);
11-
} else {
12-
mainCss.unshift("style-loader");
13-
}
14-
15-
module.exports = {
16-
mode: live ? "production" : "development",
17-
entry: [
18-
path.join(__dirname, "app", "main.js"),
19-
mainCss.join("!")
20-
],
21-
output: {
22-
path: path.join(__dirname, "dist"),
23-
filename: "bundle.js"
12+
if (mode === "production") {
13+
loaders.unshift(
14+
"file-loader",
15+
// should be just "extract-loader" in your case
16+
require.resolve("../../lib/extractLoader.js"),
17+
);
18+
} else {
19+
loaders.unshift("style-loader");
2420
}
21+
22+
return {
23+
mode,
24+
entry: pathToMainCss,
25+
module: {
26+
rules: [
27+
{
28+
test: pathToMainCss,
29+
loaders: loaders
30+
},
31+
]
32+
}
33+
};
2534
};

0 commit comments

Comments
 (0)