extract-loader - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

lib/extractLoader.js

@@ -40,3 +40,3 @@ "use strict";
  * @throws Error
- * @param {string} content the module's src
+ * @param {string} content - the module's src
  */
@@ -47,4 +47,4 @@ function extractLoader(content) {
     var callback = this.async();
-    var query = (0, _loaderUtils.parseQuery)(this.query);
-    var publicPath = typeof query.publicPath !== "undefined" ? query.publicPath : this.options.output.publicPath;
+    var options = (0, _loaderUtils.getOptions)(this) || {};
+    var publicPath = options.publicPath === undefined ? this.options.output.publicPath : options.publicPath;
     var dependencies = [];
@@ -67,3 +67,3 @@ var script = new _vm2.default.Script(content, {
         }(function (resourcePath) {
-            var absPath = _path2.default.resolve(_path2.default.dirname(_this.resourcePath), resourcePath);
+            var absPath = _path2.default.resolve(_path2.default.dirname(_this.resourcePath), resourcePath).split("?")[0];
 
@@ -73,6 +73,6 @@ // Mark the file as dependency so webpack's watcher is working
 
-            // If the required file is a JS-file, we just evaluate it with node's require
-            // This is necessary because of the css-loader which uses a helper module (css-base.js) to export stuff
-            if (/\.js$/i.test(resourcePath)) {
-                return require(absPath);
+            // If the required file is the css-loader helper, we just require it with node's require.
+            // If the required file should be processed by a loader we do not touch it (even if it is a .js file).
+            if (/^[^!]*css-base\.js$/i.test(resourcePath)) {
+                return require(absPath); // eslint-disable-line import/no-dynamic-require
             }
@@ -136,3 +136,3 @@
 function runModule(src, filename) {
-    var publicPath = arguments.length <= 2 || arguments[2] === undefined ? "" : arguments[2];
+    var publicPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
 
@@ -145,4 +145,3 @@ var script = new _vm2.default.Script(src, {
         module: {},
-        __webpack_public_path__: publicPath // eslint-disable-line camelcase
-    };
+        __webpack_public_path__: publicPath };
 
@@ -149,0 +148,0 @@ script.runInNewContext(sandbox);

package.json

 {
   "name": "extract-loader",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "webpack loader to extract HTML and CSS from the bundle",
@@ -35,18 +35,21 @@ "main": "lib/extractLoader.js",
     "babel-register": "^6.4.3",
-    "chai": "^1.10.0",
-    "chai-fs": "^0.1.0",
-    "css-loader": "^0.23.1",
-    "eslint": "^2.2.0",
-    "eslint-config-peerigon": "^3.1.0",
-    "file-loader": "^0.8.5",
+    "chai": "^3.5.0",
+    "chai-fs": "^1.0.0",
+    "css-loader": "^0.28.2",
+    "eslint": "^3.19.0",
+    "eslint-config-peerigon": "^10.1.1",
+    "eslint-plugin-flowtype": "^2.33.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsdoc": "^3.1.0",
+    "file-loader": "^0.11.1",
     "html-loader": "^0.4.3",
     "istanbul": "^0.4.2",
-    "mocha": "^2.4.5",
+    "mocha": "^3.4.1",
     "rimraf": "^2.5.1",
-    "style-loader": "^0.13.0",
-    "webpack": "^1.12.13"
+    "style-loader": "^0.18.1",
+    "webpack": "^2.6.0"
   },
   "dependencies": {
-    "loader-utils": "^0.2.16"
+    "loader-utils": "^1.1.0"
   }
 }

README.md

@@ -14,7 +14,7 @@ extract-loader
 ```javascript
-import stylesheetUrl from "file!extract!css!main.css";
+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 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. 
+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.
 
@@ -41,8 +41,8 @@ <br>
 const live = process.env.NODE_ENV === "production";
-const mainCss = ["css", path.join(__dirname, "app", "main.css")];
+const mainCss = ["css-loader", path.join(__dirname, "app", "main.css")];
 
 if (live) {
-    mainCss.unshift("file?name=[name].[ext]", "extract");
+    mainCss.unshift("file-loader?name=[name].[ext]", "extract");
 } else {
-    mainCss.unshift("style");
+    mainCss.unshift("style-loader");
 }
@@ -61,6 +61,6 @@
 
-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`: 
+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`:
 
 ```javascript
-var indexHtml = path.join(__dirname, "app", "index.html");
+const indexHtml = path.join(__dirname, "app", "index.html");
 
@@ -78,5 +78,5 @@ module.exports = {
                 loaders: [
-                    "file?name=[name].[ext]",
-                    "extract",
-                    "html?" + JSON.stringify({
+                    "file-loader?name=[name].[ext]",
+                    "extract-loader",
+                    "html-loader?" + JSON.stringify({
                         attrs: ["img:src", "link:href"]
@@ -89,5 +89,5 @@ })
                 loaders: [
-                    "file",
-                    "extract",
-                    "css"
+                    "file-loader",
+                    "extract-loader",
+                    "css-loader"
                 ]
@@ -97,3 +97,3 @@ },
                 test: /\.jpg$/,
-                loader: "file"
+                loader: "file-loader"
             }
@@ -141,7 +141,8 @@ ]
 Example:
+
 ```js
 module.exports = {
     output: {
-        path: path.resolve( './dist' ),
-        publicPath: 'dist/'
+        path: path.resolve("./dist"),
+        publicPath: "dist/"
     },
@@ -154,6 +155,6 @@ module: {
                     // target file: dist/assets/file.css
-                    "file?name=assets/[name].[ext]",
+                    "file-loader?name=assets/[name].[ext]",
                     // back up one directory to reach "dist/"
-                    "extract?publicPath=../",
-                    "css"
+                    "extract-loader?publicPath=../",
+                    "css-loader"
                 ]
@@ -178,3 +179,3 @@ }
 - Call `npm test` to run the unit tests
-- Call `npm run coverage` to check the test coverage (using [istanbul](https://github.com/gotwarlost/istanbul))  
+- Call `npm run coverage` to check the test coverage (using [istanbul](https://github.com/gotwarlost/istanbul))
 
@@ -187,1 +188,6 @@ <br>
 Unlicense
+
+Sponsors
+------------------------------------------------------------------------
+
+[<img src="https://assets.peerigon.com/peerigon/logo/peerigon-logo-flat-spinat.png" width="150" />](https://peerigon.com)

src/extractLoader.js

 import vm from "vm";
 import path from "path";
-import { parseQuery } from "loader-utils";
+import { getOptions } from "loader-utils";
 
@@ -19,3 +19,4 @@ /**
  */
-const rndPlaceholder = "__EXTRACT_LOADER_PLACEHOLDER__" + rndNumber() + rndNumber();
+const rndPlaceholder =
+    "__EXTRACT_LOADER_PLACEHOLDER__" + rndNumber() + rndNumber();
 
@@ -27,16 +28,18 @@ /**
  * @throws Error
- * @param {string} content the module's src
+ * @param {string} content - the module's src
  */
 function extractLoader(content) {
     const callback = this.async();
-    const query = parseQuery(this.query);
-    const publicPath = typeof query.publicPath !== "undefined" ? query.publicPath : this.options.output.publicPath;
+    const options = getOptions(this) || {};
+    const publicPath = options.publicPath === undefined ? this.options.output.publicPath : options.publicPath;
     const dependencies = [];
     const script = new vm.Script(content, {
         filename: this.resourcePath,
-        displayErrors: true
+        displayErrors: true,
     });
     const sandbox = {
-        require: (resourcePath) => {
-            const absPath = path.resolve(path.dirname(this.resourcePath), resourcePath);
+        require: resourcePath => {
+            const absPath = path
+                .resolve(path.dirname(this.resourcePath), resourcePath)
+                .split("?")[0];
 
@@ -46,6 +49,6 @@ // Mark the file as dependency so webpack's watcher is working
 
-            // If the required file is a JS-file, we just evaluate it with node's require
-            // This is necessary because of the css-loader which uses a helper module (css-base.js) to export stuff
-            if (/\.js$/i.test(resourcePath)) {
-                return require(absPath);
+            // If the required file is the css-loader helper, we just require it with node's require.
+            // If the required file should be processed by a loader we do not touch it (even if it is a .js file).
+            if (/^[^!]*css-base\.js$/i.test(resourcePath)) {
+                return require(absPath); // eslint-disable-line import/no-dynamic-require
             }
@@ -58,3 +61,3 @@
         module: {},
-        exports: {}
+        exports: {},
     };
@@ -68,9 +71,13 @@
     Promise.all(dependencies.map(loadModule, this))
-        .then(sources => sources.map(
-            // runModule may throw an error, so it's important that our promise is rejected in this case
-            (src, i) => runModule(src, dependencies[i], publicPath)
-        ))
-        .then(results => sandbox.module.exports.toString()
-            .replace(new RegExp(rndPlaceholder, "g"), () => results.shift())
+        .then(sources =>
+            sources.map(
+                // runModule may throw an error, so it's important that our promise is rejected in this case
+                (src, i) => runModule(src, dependencies[i], publicPath)
+            )
         )
+        .then(results =>
+            sandbox.module.exports
+                .toString()
+                .replace(new RegExp(rndPlaceholder, "g"), () => results.shift())
+        )
         .then(content => callback(null, content))
@@ -89,3 +96,6 @@ .catch(callback);
     return new Promise((resolve, reject) => {
-        this.loadModule(request, (err, src) => err ? reject(err) : resolve(src));
+        this.loadModule(
+            request,
+            (err, src) => (err ? reject(err) : resolve(src))
+        );
     });
@@ -107,7 +117,7 @@ }
         filename,
-        displayErrors: true
+        displayErrors: true,
     });
     const sandbox = {
         module: {},
-        __webpack_public_path__: publicPath // eslint-disable-line camelcase
+        __webpack_public_path__: publicPath, // eslint-disable-line camelcase
     };
@@ -124,3 +134,5 @@
 function rndNumber() {
-    return Math.random().toString().slice(2);
+    return Math.random()
+        .toString()
+        .slice(2);
 }
@@ -127,0 +139,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25975

increased by8.4%

Number of package files

13

increased by8.33%

Lines of code

255

increased by4.51%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

184

increased by3.37%

Worsened metrics

Dev dependency count

18

increased by20%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedbig.js@5.2.2(transitive)

• + Addedemojis-list@3.0.0(transitive)

• + Addedjson5@1.0.2(transitive)

• + Addedloader-utils@1.4.2(transitive)

• + Addedminimist@1.2.8(transitive)

• - Removedbig.js@3.2.0(transitive)

• - Removedemojis-list@2.1.0(transitive)

• - Removedjson5@0.5.1(transitive)

• - Removedloader-utils@0.2.17(transitive)

• - Removedobject-assign@4.1.1(transitive)

• Updatedloader-utils@^1.1.0