From 26772554e7e353cc66e7ba086667a83aea5b7f8e Mon Sep 17 00:00:00 2001 From: Kevin Chappell Date: Thu, 29 Nov 2018 12:23:32 -0800 Subject: [PATCH 1/4] feat(options): add filenameTemplate option --- README.md | 11 ++ package-lock.json | 112 +++++++++--------- src/index.js | 3 +- .../expected/demo/css/main.css | 2 + test/cases/filenameTemplate/index.js | 1 + test/cases/filenameTemplate/style.css | 1 + test/cases/filenameTemplate/webpack.config.js | 24 ++++ 7 files changed, 97 insertions(+), 57 deletions(-) create mode 100644 test/cases/filenameTemplate/expected/demo/css/main.css create mode 100644 test/cases/filenameTemplate/index.js create mode 100644 test/cases/filenameTemplate/style.css create mode 100644 test/cases/filenameTemplate/webpack.config.js diff --git a/README.md b/README.md index 04945b20..121c547e 100644 --- a/README.md +++ b/README.md @@ -342,6 +342,17 @@ module.exports = { }; ``` +#### Filename Template Function + +With the `filenameTemplate` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `filenameTemplate` to output the generated css into a different directory. + +```javascript +const miniCssExtractPlugin = new MiniCssExtractPlugin({ + filenameTemplate: ({chunk}) => + `${chunk.name.replace('/js/', '/css/')}.[chunkhash:8].css` +}) +``` + #### Long Term Caching For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`. diff --git a/package-lock.json b/package-lock.json index ed4042cd..3f17f04b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1724,7 +1724,7 @@ }, "array-equal": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=", "dev": true }, @@ -1898,7 +1898,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -2295,7 +2295,7 @@ "dependencies": { "resolve": { "version": "1.1.7", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", + "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=", "dev": true } @@ -2722,7 +2722,7 @@ }, "slice-ansi": { "version": "0.0.4", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", + "resolved": "http://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", "dev": true }, @@ -3012,7 +3012,7 @@ }, "conventional-changelog-angular": { "version": "1.6.6", - "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz", + "resolved": "http://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz", "integrity": "sha512-suQnFSqCxRwyBxY68pYTsFkG0taIdinHLNEAX5ivtw8bCRnIgnpvcHmlR/yjUyZIrNPYAoXlY1WiEKWgSE4BNg==", "dev": true, "requires": { @@ -3207,7 +3207,7 @@ }, "conventional-commits-parser": { "version": "2.1.7", - "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz", + "resolved": "http://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz", "integrity": "sha512-BoMaddIEJ6B4QVMSDu9IkVImlGOSGA1I2BQyOZHeLQ6qVOJLcLKn97+fL6dGbzWEiqDzfH4OkcveULmeq2MHFQ==", "dev": true, "requires": { @@ -3788,7 +3788,7 @@ }, "camelcase-keys": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "requires": { @@ -3852,7 +3852,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -3879,7 +3879,7 @@ }, "meow": { "version": "3.7.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz", "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "requires": { @@ -4936,7 +4936,7 @@ "dependencies": { "array-flatten": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=", "dev": true } @@ -5167,7 +5167,7 @@ }, "finalhandler": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", "dev": true, "requires": { @@ -5414,7 +5414,7 @@ }, "fs-access": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/fs-access/-/fs-access-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/fs-access/-/fs-access-1.0.1.tgz", "integrity": "sha1-1qh/JiJxzv6+wwxVNAf7mV2od3o=", "dev": true, "requires": { @@ -5463,14 +5463,14 @@ "dev": true }, "fsevents": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.7.tgz", - "integrity": "sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.8.tgz", + "integrity": "sha512-tPvHgPGB7m40CZ68xqFGkKuzN+RnpGmSV+hgeKxhRpbxdqKXUFJGC3yonBOLzQBcJyGpdZFDfCsdOC2KFsXzeA==", "dev": true, "optional": true, "requires": { - "nan": "^2.9.2", - "node-pre-gyp": "^0.10.0" + "nan": "^2.12.1", + "node-pre-gyp": "^0.12.0" }, "dependencies": { "abbrev": { @@ -5548,12 +5548,12 @@ "optional": true }, "debug": { - "version": "2.6.9", + "version": "4.1.1", "bundled": true, "dev": true, "optional": true, "requires": { - "ms": "2.0.0" + "ms": "^2.1.1" } }, "deep-extend": { @@ -5724,24 +5724,24 @@ } }, "ms": { - "version": "2.0.0", + "version": "2.1.1", "bundled": true, "dev": true, "optional": true }, "needle": { - "version": "2.2.4", + "version": "2.3.0", "bundled": true, "dev": true, "optional": true, "requires": { - "debug": "^2.1.2", + "debug": "^4.1.0", "iconv-lite": "^0.4.4", "sax": "^1.2.4" } }, "node-pre-gyp": { - "version": "0.10.3", + "version": "0.12.0", "bundled": true, "dev": true, "optional": true, @@ -5769,13 +5769,13 @@ } }, "npm-bundled": { - "version": "1.0.5", + "version": "1.0.6", "bundled": true, "dev": true, "optional": true }, "npm-packlist": { - "version": "1.2.0", + "version": "1.4.1", "bundled": true, "dev": true, "optional": true, @@ -5914,7 +5914,7 @@ "optional": true }, "semver": { - "version": "5.6.0", + "version": "5.7.0", "bundled": true, "dev": true, "optional": true @@ -6079,7 +6079,7 @@ }, "camelcase-keys": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "requires": { @@ -6114,7 +6114,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -6133,7 +6133,7 @@ }, "meow": { "version": "3.7.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz", "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "requires": { @@ -6180,7 +6180,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true }, @@ -6295,7 +6295,7 @@ }, "git-raw-commits": { "version": "1.3.6", - "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-1.3.6.tgz", + "resolved": "http://registry.npmjs.org/git-raw-commits/-/git-raw-commits-1.3.6.tgz", "integrity": "sha512-svsK26tQ8vEKnMshTDatSIQSMDdz8CxIIqKsvPqbtV23Etmw6VNaFAitu8zwZ0VrOne7FztwPyRLxK7/DIUTQg==", "dev": true, "requires": { @@ -6337,7 +6337,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -6467,7 +6467,7 @@ }, "globby": { "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz", "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { @@ -6480,7 +6480,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -6708,7 +6708,7 @@ }, "http-errors": { "version": "1.6.3", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "dev": true, "requires": { @@ -7362,7 +7362,7 @@ }, "is-obj": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=", "dev": true }, @@ -8466,7 +8466,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -8860,7 +8860,7 @@ }, "media-typer": { "version": "0.3.0", - "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "dev": true }, @@ -9021,7 +9021,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" }, "minimist-options": { @@ -9075,7 +9075,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { @@ -9084,7 +9084,7 @@ "dependencies": { "minimist": { "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true } @@ -9617,7 +9617,7 @@ }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, @@ -9836,7 +9836,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true }, @@ -9959,7 +9959,7 @@ "dependencies": { "async": { "version": "1.5.2", - "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", "dev": true } @@ -10417,7 +10417,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "requires": { @@ -10571,7 +10571,7 @@ "dependencies": { "jsesc": { "version": "0.5.0", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz", + "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz", "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=", "dev": true } @@ -10848,7 +10848,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "dev": true, "requires": { @@ -11485,7 +11485,7 @@ }, "sprintf-js": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, @@ -11703,7 +11703,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "requires": { @@ -11729,7 +11729,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { @@ -11744,7 +11744,7 @@ }, "strip-eof": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, @@ -12006,7 +12006,7 @@ }, "through": { "version": "2.3.8", - "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", "dev": true }, @@ -12206,9 +12206,9 @@ "dev": true }, "uglify-js": { - "version": "3.5.5", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.5.tgz", - "integrity": "sha512-e58FqZzPwaLODQetDQKlvErZaGkh1UmzP8YwU0aG65NLourKNtwVyDG8tkIyUU0vqWzxaikSvTaxrCSscmvqvQ==", + "version": "3.5.6", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.6.tgz", + "integrity": "sha512-YDKRX8F0Y+Jr7LhoVk0n4G7ltR3Y7qFAj+DtVBthlOgCcIj1hyMigCfousVfn9HKmvJ+qiFlLDwaHx44/e5ZKw==", "dev": true, "optional": true, "requires": { @@ -12904,7 +12904,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { diff --git a/src/index.js b/src/index.js index fc295c5c..4e40986c 100644 --- a/src/index.js +++ b/src/index.js @@ -195,7 +195,8 @@ class MiniCssExtractPlugin { renderedModules, compilation.runtimeTemplate.requestShortener ), - filenameTemplate: this.options.filename, + filenameTemplate: + this.options.filenameTemplate || this.options.filename, pathOptions: { chunk, contentHashType: MODULE_TYPE, diff --git a/test/cases/filenameTemplate/expected/demo/css/main.css b/test/cases/filenameTemplate/expected/demo/css/main.css new file mode 100644 index 00000000..d2743ef5 --- /dev/null +++ b/test/cases/filenameTemplate/expected/demo/css/main.css @@ -0,0 +1,2 @@ +body { background: purple; } + diff --git a/test/cases/filenameTemplate/index.js b/test/cases/filenameTemplate/index.js new file mode 100644 index 00000000..aa3357bf --- /dev/null +++ b/test/cases/filenameTemplate/index.js @@ -0,0 +1 @@ +import './style.css'; diff --git a/test/cases/filenameTemplate/style.css b/test/cases/filenameTemplate/style.css new file mode 100644 index 00000000..484aaf18 --- /dev/null +++ b/test/cases/filenameTemplate/style.css @@ -0,0 +1 @@ +body { background: purple; } diff --git a/test/cases/filenameTemplate/webpack.config.js b/test/cases/filenameTemplate/webpack.config.js new file mode 100644 index 00000000..f456751f --- /dev/null +++ b/test/cases/filenameTemplate/webpack.config.js @@ -0,0 +1,24 @@ +const Self = require('../../../'); + +module.exports = { + entry: { + 'demo/js/main': './index.js', + }, + module: { + rules: [ + { + test: /\.css$/, + use: [Self.loader, 'css-loader'], + }, + ], + }, + output: { + filename: '[name].js', + }, + plugins: [ + new Self({ + filenameTemplate: ({ chunk }) => + `${chunk.name.replace('/js/', '/css/')}.css`, + }), + ], +}; From 89272fff4852ed6ee17240277d381cff50fa49b5 Mon Sep 17 00:00:00 2001 From: Kevin Chappell Date: Fri, 19 Apr 2019 16:28:35 -0700 Subject: [PATCH 2/4] refactor: call filenameTemplate option from new function --- src/index.js | 8 +++++--- test/cases/filenameTemplate/webpack.config.js | 3 +-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 4e40986c..89219f59 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i; const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i; const REGEXP_NAME = /\[name\]/i; const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g; +const DEFAULT_FILENAME = '[name].css'; class CssDependency extends webpack.Dependency { constructor( @@ -122,7 +123,8 @@ class MiniCssExtractPlugin { constructor(options) { this.options = Object.assign( { - filename: '[name].css', + filename: DEFAULT_FILENAME, + filenameTemplate: () => options.filename || DEFAULT_FILENAME, }, options ); @@ -195,8 +197,8 @@ class MiniCssExtractPlugin { renderedModules, compilation.runtimeTemplate.requestShortener ), - filenameTemplate: - this.options.filenameTemplate || this.options.filename, + filenameTemplate: ({ chunk: chunkData }) => + this.options.filenameTemplate(chunkData), pathOptions: { chunk, contentHashType: MODULE_TYPE, diff --git a/test/cases/filenameTemplate/webpack.config.js b/test/cases/filenameTemplate/webpack.config.js index f456751f..547f0e32 100644 --- a/test/cases/filenameTemplate/webpack.config.js +++ b/test/cases/filenameTemplate/webpack.config.js @@ -17,8 +17,7 @@ module.exports = { }, plugins: [ new Self({ - filenameTemplate: ({ chunk }) => - `${chunk.name.replace('/js/', '/css/')}.css`, + filenameTemplate: ({ name }) => `${name.replace('/js/', '/css/')}.css`, }), ], }; From 91d920f0e068e80a1f2243453d34bdb11bf5e7a0 Mon Sep 17 00:00:00 2001 From: Kevin Chappell Date: Tue, 23 Apr 2019 11:11:05 -0700 Subject: [PATCH 3/4] docs: correct filenameTemplate documentation --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 121c547e..84ce004c 100644 --- a/README.md +++ b/README.md @@ -348,8 +348,7 @@ With the `filenameTemplate` option you can use chunk data to customize the filen ```javascript const miniCssExtractPlugin = new MiniCssExtractPlugin({ - filenameTemplate: ({chunk}) => - `${chunk.name.replace('/js/', '/css/')}.[chunkhash:8].css` + filenameTemplate: ({ name }) => `${name.replace('/js/', '/css/')}.css` }) ``` From d215aee0e4297d8f047a40d5f63e7c40924dcd84 Mon Sep 17 00:00:00 2001 From: Kevin Chappell Date: Wed, 24 Apr 2019 11:55:34 -0700 Subject: [PATCH 4/4] refactor: rename filenameTemplate to moduleFilename --- README.md | 6 +++--- src/index.js | 4 ++-- .../expected/demo/css/main.css | 0 test/cases/{filenameTemplate => moduleFilename}/index.js | 0 test/cases/{filenameTemplate => moduleFilename}/style.css | 0 .../{filenameTemplate => moduleFilename}/webpack.config.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) rename test/cases/{filenameTemplate => moduleFilename}/expected/demo/css/main.css (100%) rename test/cases/{filenameTemplate => moduleFilename}/index.js (100%) rename test/cases/{filenameTemplate => moduleFilename}/style.css (100%) rename test/cases/{filenameTemplate => moduleFilename}/webpack.config.js (80%) diff --git a/README.md b/README.md index 84ce004c..6eee7498 100644 --- a/README.md +++ b/README.md @@ -342,13 +342,13 @@ module.exports = { }; ``` -#### Filename Template Function +#### Module Filename Option -With the `filenameTemplate` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `filenameTemplate` to output the generated css into a different directory. +With the `moduleFilename` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `moduleFilename` to output the generated css into a different directory. ```javascript const miniCssExtractPlugin = new MiniCssExtractPlugin({ - filenameTemplate: ({ name }) => `${name.replace('/js/', '/css/')}.css` + moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css` }) ``` diff --git a/src/index.js b/src/index.js index 89219f59..c8c65499 100644 --- a/src/index.js +++ b/src/index.js @@ -124,7 +124,7 @@ class MiniCssExtractPlugin { this.options = Object.assign( { filename: DEFAULT_FILENAME, - filenameTemplate: () => options.filename || DEFAULT_FILENAME, + moduleFilename: () => options.filename || DEFAULT_FILENAME, }, options ); @@ -198,7 +198,7 @@ class MiniCssExtractPlugin { compilation.runtimeTemplate.requestShortener ), filenameTemplate: ({ chunk: chunkData }) => - this.options.filenameTemplate(chunkData), + this.options.moduleFilename(chunkData), pathOptions: { chunk, contentHashType: MODULE_TYPE, diff --git a/test/cases/filenameTemplate/expected/demo/css/main.css b/test/cases/moduleFilename/expected/demo/css/main.css similarity index 100% rename from test/cases/filenameTemplate/expected/demo/css/main.css rename to test/cases/moduleFilename/expected/demo/css/main.css diff --git a/test/cases/filenameTemplate/index.js b/test/cases/moduleFilename/index.js similarity index 100% rename from test/cases/filenameTemplate/index.js rename to test/cases/moduleFilename/index.js diff --git a/test/cases/filenameTemplate/style.css b/test/cases/moduleFilename/style.css similarity index 100% rename from test/cases/filenameTemplate/style.css rename to test/cases/moduleFilename/style.css diff --git a/test/cases/filenameTemplate/webpack.config.js b/test/cases/moduleFilename/webpack.config.js similarity index 80% rename from test/cases/filenameTemplate/webpack.config.js rename to test/cases/moduleFilename/webpack.config.js index 547f0e32..28e0cb42 100644 --- a/test/cases/filenameTemplate/webpack.config.js +++ b/test/cases/moduleFilename/webpack.config.js @@ -17,7 +17,7 @@ module.exports = { }, plugins: [ new Self({ - filenameTemplate: ({ name }) => `${name.replace('/js/', '/css/')}.css`, + moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`, }), ], };