Skip to content

Commit

Permalink
feat: Accept function as publicPath option (#51)
Browse files Browse the repository at this point in the history
Allow `publicPath` option to be a function that returns the publicPath string that could be determined based on current context.
  • Loading branch information
ipsips authored and jhnns committed Nov 26, 2018
1 parent fb7139a commit 678933e
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 3 deletions.
40 changes: 38 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -171,9 +171,9 @@ Options
------------------------------------------------------------------------

There is currently exactly one option: `publicPath`.
If you are using a relative `publicPath` in webpack's [output options](https://webpack.js.org/configuration/output/#output-publicpath) and extracting to a file with the `file-loader`, you might need this to account for the location of your extracted file.
If you are using a relative `publicPath` in webpack's [output options](https://webpack.js.org/configuration/output/#output-publicpath) and extracting to a file with the `file-loader`, you might need this to account for the location of your extracted file. `publicPath` may be defined as a string or a function that accepts current [loader context](https://webpack.js.org/api/loaders/#the-loader-context) as single argument.

Example:
Example with publicPath option as a string:

```js
module.exports = {
Expand Down Expand Up @@ -208,6 +208,42 @@ module.exports = {
};
```

Example with publicPath option as a function:

```js
module.exports = {
output: {
path: path.resolve("./dist"),
publicPath: "dist/"
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "file-loader",
options: {
name: "assets/[name].[ext]",
},
},
{
loader: "extract-loader",
options: {
// dynamically return a relative publicPath based on how deep in directory structure the loaded file is in /src/ directory
publicPath: (context) => '../'.repeat(path.relative(path.resolve('src'), context.context).split('/').length),
}
},
{
loader: "css-loader",
},
],
}
]
}
};
```

You need another option? Then you should think about:

<br>
Expand Down
2 changes: 1 addition & 1 deletion src/extractLoader.js
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ function rndNumber() {
*/
function getPublicPath(options, context) {
if ("publicPath" in options) {
return options.publicPath;
return typeof options.publicPath === "function" ? options.publicPath(context) : options.publicPath;
}

if (context.options && context.options.output && "publicPath" in context.options.output) {
Expand Down
18 changes: 18 additions & 0 deletions test/extractLoader.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,24 @@ describe("extractLoader", () => {
/<img src="\/other\/hi-dist\.jpg">/
);
}));
it("should execute options.publicPath if it's defined as a function", done => {
let publicPathCalledWithContext = false;
const loaderContext = {
async: () => () => done(),
cacheable() {},
query: {
publicPath: context => {
publicPathCalledWithContext = context === loaderContext;

return "";
},
},
};

extractLoader.call(loaderContext, "");

expect(publicPathCalledWithContext).to.equal(true);
});
it("should support explicit loader chains", () => compile({testModule: "loader.html"}).then(() => {
const loaderHtml = path.resolve(__dirname, "dist/loader-dist.html");
const errJs = path.resolve(__dirname, "dist/err.js");
Expand Down

0 comments on commit 678933e

Please sign in to comment.