Skip to content

Commit

Permalink
feat: Add source map support (#43)
Browse files Browse the repository at this point in the history 
Fixes #1
  • Loading branch information
@jhnns
jhnns authored Aug 31, 2018
1 parent c5aff66 commit 8f56c2f
Show file tree
Hide file tree
Showing 13 changed files with 11,510 additions and 17,240 deletions.
3 changes: 2 additions & 1 deletion .babelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"env",
{
"targets": {
"node": 4
"node": 6
}
}
]
Expand All @@ -13,6 +13,7 @@
"transform-runtime"
],
"sourceMaps": true,
"retainLines": true,
"env": {
"test": {
"plugins": ["istanbul"]
Expand Down
163 changes: 92 additions & 71 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ 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](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.
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.

<br>

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

```js
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 = ({ mode }) => {
const pathToMainCss = require.resolve("./app/main.css");
const loaders = [{
loader: "css-loader",
options: {
sourceMap: true
}
}];

if (mode === "production") {
loaders.unshift(
"file-loader",
"extract-loader"
);
} else {
loaders.unshift("style-loader");
}

module.exports = {
entry: [
path.join(__dirname, "app", "main.js"),
mainCss.join("!")
],
...
return {
mode,
entry: pathToMainCss,
module: {
rules: [
{
test: pathToMainCss,
loaders: loaders
},
]
}
};
};
```

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

```js
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"
},
],
},
]
}
};
module.exports = ({ mode }) => {
const pathToMainJs = require.resolve("./app/main.js");
const pathToIndexHtml = require.resolve("./app/index.html");

return {
mode,
entry: [
pathToMainJs,
pathToIndexHtml
],
module: {
rules: [
{
test: pathToIndexHtml,
use: [
"file-loader",
"extract-loader",
{
loader: "html-loader",
options: {
attrs: ["img:src", "link:href"]
}
}
]
},
{
test: /\.css$/,
use: [
"file-loader",
"extract-loader",
{
loader: "css-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.jpg$/,
use: "file-loader"
}
]
}
};
}
```

turns
Expand Down Expand Up @@ -146,6 +151,22 @@ into

<br>

Source Maps
------------------------------------------------------------------------

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**:

```js
{
loader: "css-loader",
options: {
sourceMap: true
}
}
```

<br>

Options
------------------------------------------------------------------------

Expand Down
12 changes: 12 additions & 0 deletions examples/index-html/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "index-html",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"build": "../../node_modules/.bin/webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC"
}
89 changes: 45 additions & 44 deletions examples/index-html/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,50 @@
var path = require("path");
"use strict";

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

module.exports = {
mode: "development",
entry: [
path.join(__dirname, "app", "main.js"),
indexHtml
],
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: indexHtml,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]"
return {
mode,
entry: [
pathToMainJs,
pathToIndexHtml
],
module: {
rules: [
{
test: pathToIndexHtml,
use: [
"file-loader",
// should be just "extract-loader" in your case
require.resolve("../../lib/extractLoader.js"),
{
loader: "html-loader",
options: {
attrs: ["img:src", "link:href"]
}
}
},
path.resolve(__dirname, "..", "..", "lib", "extractLoader.js"),
{
loader: "html-loader",
options: {
attrs: ["img:src", "link:href"]
]
},
{
test: /\.css$/,
use: [
"file-loader",
// should be just "extract-loader" in your case
require.resolve("../../lib/extractLoader.js"),
{
loader: "css-loader",
options: {
sourceMap: true
}
}
}
]
},
{
test: /\.css$/,
use: [
"file-loader",
path.resolve(__dirname, "..", "..", "lib", "extractLoader.js"),
"css-loader"
]
},
{
test: /\.jpg$/,
use: "file-loader"
}
]
}
]
},
{
test: /\.jpg$/,
use: "file-loader"
}
]
}
};
};
1 change: 0 additions & 1 deletion examples/main-css/app/main.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion examples/main-css/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<meta charset="UTF-8">
<title>Main CSS Example</title>
<link href="dist/main.css" type="text/css" rel="stylesheet">
<script src="dist/bundle.js"></script>
</head>
<body></body>
</html>
12 changes: 12 additions & 0 deletions examples/main-css/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{

This comment has been minimized.

Sign in to view

Copy link
@averon-jpg

averon-jpg Feb 20, 2021

"name": "main-css",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"build": "../../node_modules/.bin/webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC"
}
"name": "main-css",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"build": "../../node_modules/.bin/webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC"
}
51 changes: 30 additions & 21 deletions examples/main-css/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,34 @@
var path = require("path");
"use strict";

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

if (live) {
mainCss.unshift(
"file-loader?name=[name].[ext]",
path.resolve(__dirname, "..", "..", "lib", "extractLoader.js") // should be just "extract" in your case
);
} else {
mainCss.unshift("style-loader");
}

module.exports = {
mode: live ? "production" : "development",
entry: [
path.join(__dirname, "app", "main.js"),
mainCss.join("!")
],
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js"
if (mode === "production") {
loaders.unshift(
"file-loader",
// should be just "extract-loader" in your case
require.resolve("../../lib/extractLoader.js"),
);
} else {
loaders.unshift("style-loader");
}

return {
mode,
entry: pathToMainCss,
module: {
rules: [
{
test: pathToMainCss,
loaders: loaders
},
]
}
};
};
Loading

0 comments on commit 8f56c2f

Please sign in to comment.