Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add source map support #43

Merged
merged 1 commit into from Aug 31, 2018
Merged

feat: Add source map support #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion .babelrc
View file
Open in desktop
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
Open in desktop
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
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion examples/main-css/index.html
View file
Open in desktop
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
Open in desktop
@@ -0,0 +1,12 @@
{
"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
Open in desktop
@@ -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
},
]
}
};
};