From 5ded65121df888ad0262ef319f13c3bd0966497a Mon Sep 17 00:00:00 2001 From: Angeline Loh Date: Wed, 4 Dec 2019 12:31:39 +1300 Subject: [PATCH 1/3] Issue #55, #50 - Fix issue with loading resource with Query parameters, it doesn't currently slice the path for query parameters --- src/extractLoader.js | 24 +++++++++++++++++--- test/extractLoader.test.js | 7 ++++++ test/modules/simple-css-with-query-params.js | 2 ++ 3 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 test/modules/simple-css-with-query-params.js diff --git a/src/extractLoader.js b/src/extractLoader.js index c39d15a..ab3883d 100644 --- a/src/extractLoader.js +++ b/src/extractLoader.js @@ -75,6 +75,26 @@ function evalDependencyGraph({loaderContext, src, filename, publicPath = ""}) { } } + function extractQueryFromPath(givenRelativePath) { + const indexOfQuery = givenRelativePath.indexOf("?"); + + if (indexOfQuery !== -1) { + const indexOfExclamationMark = givenRelativePath.indexOf("!"); + + if (indexOfExclamationMark === -1 || indexOfExclamationMark > indexOfQuery) { + return { + relativePathWithoutQuery: givenRelativePath.slice(0, indexOfQuery), + query: givenRelativePath.slice(indexOfQuery), + }; + } + } + + return { + relativePathWithoutQuery: givenRelativePath, + query: "", + }; + } + async function evalModule(src, filename) { const rndPlaceholder = "__EXTRACT_LOADER_PLACEHOLDER__" + rndNumber() + rndNumber(); const rndPlaceholderPattern = new RegExp(rndPlaceholder, "g"); @@ -91,10 +111,8 @@ function evalDependencyGraph({loaderContext, src, filename, publicPath = ""}) { exports, __webpack_public_path__: publicPath, // eslint-disable-line camelcase require: givenRelativePath => { - const indexOfQuery = Math.max(givenRelativePath.indexOf("?"), givenRelativePath.length); - const relativePathWithoutQuery = givenRelativePath.slice(0, indexOfQuery); + const {relativePathWithoutQuery, query} = extractQueryFromPath(givenRelativePath); const indexOfLastExclMark = relativePathWithoutQuery.lastIndexOf("!"); - const query = givenRelativePath.slice(indexOfQuery); const loaders = givenRelativePath.slice(0, indexOfLastExclMark + 1); const relativePath = relativePathWithoutQuery.slice(indexOfLastExclMark + 1); const absolutePath = resolve.sync(relativePath, { diff --git a/test/extractLoader.test.js b/test/extractLoader.test.js index a830b32..24ec2e9 100644 --- a/test/extractLoader.test.js +++ b/test/extractLoader.test.js @@ -21,6 +21,13 @@ describe("extractLoader", () => { expect(simpleJs).to.be.a.file(); expect(simpleJs).to.have.content("hello"); })); + it("should extract resource with query params into simple-css-with-query-param.js", () => + compile({testModule: "simple-css-with-query-params.js"}).then(() => { + const simpleJs = path.resolve(__dirname, "dist/simple-css-with-query-params-dist.js"); + + expect(simpleJs).to.be.a.file(); + expect(simpleJs).to.have.content("simple-dist.css"); + })); it("should extract the html of modules/simple.html into simple.html", () => compile({testModule: "simple.html"}).then(() => { const simpleHtml = path.resolve(__dirname, "dist/simple-dist.html"); diff --git a/test/modules/simple-css-with-query-params.js b/test/modules/simple-css-with-query-params.js new file mode 100644 index 0000000..82f99d9 --- /dev/null +++ b/test/modules/simple-css-with-query-params.js @@ -0,0 +1,2 @@ +/* eslint-disable import/unambiguous, import/no-unresolved */ +module.exports = require("./simple.css?v=1.2"); From a9a114e93a8d571ac7b9c5f95386eff1bc06ac47 Mon Sep 17 00:00:00 2001 From: Jannik Keye Date: Fri, 24 Jan 2020 08:12:19 +0100 Subject: [PATCH 2/3] fix(core): support paths with query params and loaders --- src/extractLoader.js | 19 ++++++++----------- test/extractLoader.test.js | 7 +++++++ ...simple-css-with-query-params-and-loader.js | 2 ++ 3 files changed, 17 insertions(+), 11 deletions(-) create mode 100644 test/modules/simple-css-with-query-params-and-loader.js diff --git a/src/extractLoader.js b/src/extractLoader.js index ab3883d..9721e86 100644 --- a/src/extractLoader.js +++ b/src/extractLoader.js @@ -76,17 +76,14 @@ function evalDependencyGraph({loaderContext, src, filename, publicPath = ""}) { } function extractQueryFromPath(givenRelativePath) { - const indexOfQuery = givenRelativePath.indexOf("?"); - - if (indexOfQuery !== -1) { - const indexOfExclamationMark = givenRelativePath.indexOf("!"); - - if (indexOfExclamationMark === -1 || indexOfExclamationMark > indexOfQuery) { - return { - relativePathWithoutQuery: givenRelativePath.slice(0, indexOfQuery), - query: givenRelativePath.slice(indexOfQuery), - }; - } + const indexOfLastExclMark = givenRelativePath.lastIndexOf("!"); + const indexOfQuery = givenRelativePath.lastIndexOf("?"); + + if (indexOfQuery !== -1 && indexOfQuery > indexOfLastExclMark) { + return { + relativePathWithoutQuery: givenRelativePath.slice(0, indexOfQuery), + query: givenRelativePath.slice(indexOfQuery), + }; } return { diff --git a/test/extractLoader.test.js b/test/extractLoader.test.js index 24ec2e9..2e6cde3 100644 --- a/test/extractLoader.test.js +++ b/test/extractLoader.test.js @@ -28,6 +28,13 @@ describe("extractLoader", () => { expect(simpleJs).to.be.a.file(); expect(simpleJs).to.have.content("simple-dist.css"); })); + it("should extract resource with query params and loader into simple-css-with-query-param-and-loader.js", () => + compile({testModule: "simple-css-with-query-params-and-loader.js"}).then(() => { + const simpleJs = path.resolve(__dirname, "dist/simple-css-with-query-params-and-loader-dist.js"); + + expect(simpleJs).to.be.a.file(); + expect(simpleJs).to.have.content("renamed-simple.css"); + })); it("should extract the html of modules/simple.html into simple.html", () => compile({testModule: "simple.html"}).then(() => { const simpleHtml = path.resolve(__dirname, "dist/simple-dist.html"); diff --git a/test/modules/simple-css-with-query-params-and-loader.js b/test/modules/simple-css-with-query-params-and-loader.js new file mode 100644 index 0000000..87181a2 --- /dev/null +++ b/test/modules/simple-css-with-query-params-and-loader.js @@ -0,0 +1,2 @@ +/* eslint-disable import/unambiguous, import/no-unresolved */ +module.exports = require("!!file-loader?name=renamed-simple.css!./simple.css?v=1.2"); From b50dcba98c887617ffa9522130a5dcc273fae4f9 Mon Sep 17 00:00:00 2001 From: Jannik Keye Date: Mon, 27 Jan 2020 15:26:57 +0100 Subject: [PATCH 3/3] fix: linter warrnings --- src/extractLoader.js | 4 ++++ test/modules/simple-css-with-query-params-and-loader.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/extractLoader.js b/src/extractLoader.js index 9721e86..c2d8bc9 100644 --- a/src/extractLoader.js +++ b/src/extractLoader.js @@ -176,6 +176,9 @@ function rndNumber() { .slice(2); } +// getPublicPath() encapsulates the complexity of reading the publicPath from the current +// webpack config. Let's keep the complexity in this function. +/* eslint-disable complexity */ /** * Retrieves the public path from the loader options, context.options (webpack <4) or context._compilation (webpack 4+). * context._compilation is likely to get removed in a future release, so this whole function should be removed then. @@ -201,6 +204,7 @@ function getPublicPath(options, context) { return ""; } +/* eslint-enable complexity */ // For CommonJS interoperability module.exports = extractLoader; diff --git a/test/modules/simple-css-with-query-params-and-loader.js b/test/modules/simple-css-with-query-params-and-loader.js index 87181a2..d651efb 100644 --- a/test/modules/simple-css-with-query-params-and-loader.js +++ b/test/modules/simple-css-with-query-params-and-loader.js @@ -1,2 +1,2 @@ -/* eslint-disable import/unambiguous, import/no-unresolved */ +/* eslint-disable import/unambiguous, import/no-unresolved, import/no-webpack-loader-syntax */ module.exports = require("!!file-loader?name=renamed-simple.css!./simple.css?v=1.2");