feat: Options to configure file-loader name property (nuxt-community#75)

* Added options to module to allow changing svg destination emitted with file-loader. Provided default config with default nuxt options for name option in file-loader. * feat: Added options to module to allow changing svg destination emitted with file-loader. Provided default config with default nuxt options for name option in file-loader. * fix: rename file-loader options, adapt to new setup function signature * fix(nuxt-config): replace require with import as module is exported as es6 module * refactor(module): reformat with prettier * feat(README): update README configuration section with fileLoader options Co-authored-by: Alex Troshin <[email protected]>
yandongxu · Jan 28, 2022 · 0868439 · 0868439
1 parent 581585c
commit 0868439
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -55,6 +55,9 @@ export default {
       },
       svgSpriteLoader: {
           // svg-sprite-loader options
+      },
+      fileLoader: {
+          // file-loader options
       }
   }
 };

diff --git a/example/nuxt.config.js b/example/nuxt.config.js
@@ -1,3 +1,5 @@
+import svgModule from "../lib/module";
+
 export default {
-  buildModules: [require("../lib/module")],
+  buildModules: [svgModule],
 };
diff --git a/lib/config.js b/lib/config.js
@@ -0,0 +1,5 @@
+const getFileLoaderDefaultConfig = ({ isDev }) => ({
+  name: isDev ? "[path][name].[ext]" : "img/[name].[contenthash:7].[ext]",
+});
+
+module.exports.getFileLoaderDefaultConfig = getFileLoaderDefaultConfig;
diff --git a/lib/module.js b/lib/module.js
@@ -1,3 +1,5 @@
+const { getFileLoaderDefaultConfig } = require("./config");
+
 /**
  * This is the original RegExp cloned from the original Nuxt.js configuration
  * files, with only the search for ".svg" files removed. Keep tabs on this in
@@ -7,7 +9,7 @@ const ORIGINAL_TEST = /\.(png|jpe?g|gif|svg|webp|avif)$/i;
 const ORIGINAL_TEST_OLD_NUXT = /\.(png|jpe?g|gif|svg|webp)$/i;
 const REPLACEMENT_TEST = /\.(png|jpe?g|gif|webp|avif)$/i;
 
-export default function svgModule (moduleOptions) {
+export default function svgModule(moduleOptions) {
   const options = Object.assign({}, this.options.svg, moduleOptions);
   this.extendBuild(setup.bind(this, options));
 }
@@ -20,6 +22,14 @@ export default function svgModule (moduleOptions) {
  * @param config The webpack configuration object to extend
  */
 function setup(options, config) {
+  const fileLoaderOptions = Object.assign(
+    {},
+    getFileLoaderDefaultConfig(this),
+    typeof options.fileLoader === "function"
+      ? options.fileLoader(this)
+      : options.fileLoader
+  );
+
   const rules = config.module.rules;
 
   // Remove any original svg rules.
@@ -86,7 +96,7 @@ function setup(options, config) {
       {
         use: {
           loader: "file-loader",
-          options: { esModule: false },
+          options: { esModule: false, ...fileLoaderOptions },
         },
       },
     ],

diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
   "main": "lib/module.js",
   "scripts": {
     "dev": "nuxt dev example",
+    "generate": "nuxt generate example",
+    "start": "nuxt start example",
     "format": "prettier --write '**/*.{js,json,vue}'"
   },
   "dependencies": {