From f400eb65b7a2ecd6a47024710b145c902672286e Mon Sep 17 00:00:00 2001 From: Forrest Li Date: Wed, 22 Sep 2021 16:27:35 -0400 Subject: [PATCH] chore(webpack): Use v5 asset modules over loaders --- Documentation/config.js | 4 +- Documentation/content/docs/develop_build.md | 2 +- .../docs/intro_vtk_as_es6_dependency.md | 10 ++- README.md | 2 +- Utilities/config/rules-examples.js | 2 +- Utilities/config/rules-tests.js | 11 +++- Utilities/config/rules-vtk.js | 2 +- package-lock.json | 62 ------------------- package.json | 2 - webpack.common.js | 2 +- 10 files changed, 23 insertions(+), 76 deletions(-) diff --git a/Documentation/config.js b/Documentation/config.js index e8b478f54ec..e119e6dcca1 100644 --- a/Documentation/config.js +++ b/Documentation/config.js @@ -67,7 +67,7 @@ module.exports = { }, { test: /\\.svg$/, - use: [{ loader: 'raw-loader' }], + type: 'asset/source', }, { test: /\\.worker\\.js$/, @@ -78,7 +78,7 @@ module.exports = { }, ], }, - { test: /\\.(png|jpg)$/, use: 'url-loader?limit=81920' }, + { test: /\\.(png|jpg)$/, type: 'asset' }, { test: /\\.html$/, loader: 'html-loader' }, { test: /\\.cjson$/, loader: 'hson-loader' }, { test: /\\.hson$/, loader: 'hson-loader' }, diff --git a/Documentation/content/docs/develop_build.md b/Documentation/content/docs/develop_build.md index ce7d7a1db15..170ebe6f913 100644 --- a/Documentation/content/docs/develop_build.md +++ b/Documentation/content/docs/develop_build.md @@ -7,7 +7,7 @@ The library can be built with webpack automatically. Webpack can either gather a ## Building vtk.js -In order to build the library you can run `npm run build` for quick development usage or `npm run build:release` for production usage. +In order to build the library you can run `npm run dev` for quick development usage or `npm run build` for production usage. Either of these commands will generate a `dist/vtk.js` file that can then be used as an external script. diff --git a/Documentation/content/docs/intro_vtk_as_es6_dependency.md b/Documentation/content/docs/intro_vtk_as_es6_dependency.md index ffef81c24c6..a69511767de 100644 --- a/Documentation/content/docs/intro_vtk_as_es6_dependency.md +++ b/Documentation/content/docs/intro_vtk_as_es6_dependency.md @@ -3,6 +3,10 @@ title: Using vtk.js as an ES6 dependency This guide illustrates how to consume vtk.js as an ES dependency. +This document was last updated with the following package versions: +- `@kitware/vtk.js@v19` +- `webpack@v5` + ## Starting a new vtk.js project There are several ways to start a new vtk.js project. Below lists a few ways you can begin using vtk.js with your favorite project build tool. @@ -111,8 +115,8 @@ var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rule module: { rules: [ { test: /\.html$/, loader: 'html-loader' }, - { test: /\.(png|jpg)$/, use: 'url-loader?limit=81920' }, - { test: /\.svg$/, use: [{ loader: 'raw-loader' }] }, + { test: /\.(png|jpg)$/, type: 'asset' }, + { test: /\.svg$/, type: 'asset/source' }, ].concat(vtkRules, cssRules), }, @@ -121,4 +125,4 @@ var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rule Another possible issue is the fact that some relative import can not be resolved. In which case, you should copy those files to your local `./src/` directory and fix the actual import path. -And if you didn't skip any piece you should be allset and ready to run that new code base. +And if you didn't skip any piece you should be all set and ready to run that new code base. diff --git a/README.md b/README.md index 8a2ca072356..38a6de9a919 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ In general VTK tries to be as portable as possible; the specific configurations vtk.js supports the following development environments: -- Node 10+ +- Node 12+ - NPM 6+ and we use [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env) with the [defaults](https://github.com/Kitware/vtk-js/blob/master/.browserslistrc) set of [browsers target](https://browserl.ist/?q=defaults). diff --git a/Utilities/config/rules-examples.js b/Utilities/config/rules-examples.js index 6aa36e1408b..d0a87e3d2a2 100644 --- a/Utilities/config/rules-examples.js +++ b/Utilities/config/rules-examples.js @@ -1,5 +1,5 @@ module.exports = [ - { test: /\.(png|jpg)$/, use: 'url-loader?limit=81920' }, + { test: /\.(png|jpg)$/, type: 'asset' }, { test: /\.html$/, loader: 'html-loader' }, { test: /\.cjson$/, loader: 'hson-loader' }, { test: /\.hson$/, loader: 'hson-loader' }, diff --git a/Utilities/config/rules-tests.js b/Utilities/config/rules-tests.js index a88f2356f85..4cdac4855fb 100644 --- a/Utilities/config/rules-tests.js +++ b/Utilities/config/rules-tests.js @@ -1,7 +1,14 @@ module.exports = [ - { test: /canvas.node/, loader: 'ignore-loader' }, { test: /\.cjson$/, loader: 'hson-loader' }, - { test: /test[^\.]*\.(png|jpg)$/, use: 'url-loader?limit=1048576' }, + { + test: /test[^\.]*\.(png|jpg)$/, + type: 'asset', + parser: { + dataUrlCondition: { + maxSize: 1024 * 1024, + }, + }, + }, { test: /\.glsl$/i, loader: 'shader-loader' }, { test: /\.worker\.js$/, diff --git a/Utilities/config/rules-vtk.js b/Utilities/config/rules-vtk.js index 0ea9b72d303..0d15628461c 100644 --- a/Utilities/config/rules-vtk.js +++ b/Utilities/config/rules-vtk.js @@ -48,7 +48,7 @@ module.exports = [ }, { test: /\.svg$/, - use: [{ loader: 'raw-loader' }], + type: 'asset/source', }, { test: /\.worker\.js$/, diff --git a/package-lock.json b/package-lock.json index 23636e8fc08..2138ca90393 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15144,29 +15144,6 @@ "unpipe": "1.0.0" } }, - "raw-loader": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz", - "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==", - "dev": true, - "requires": { - "loader-utils": "^2.0.0", - "schema-utils": "^3.0.0" - }, - "dependencies": { - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - } - } - }, "rc": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", @@ -17831,45 +17808,6 @@ "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==", "dev": true }, - "url-loader": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz", - "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==", - "dev": true, - "requires": { - "loader-utils": "^2.0.0", - "mime-types": "^2.1.27", - "schema-utils": "^3.0.0" - }, - "dependencies": { - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "mime-db": { - "version": "1.45.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz", - "integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==", - "dev": true - }, - "mime-types": { - "version": "2.1.28", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz", - "integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==", - "dev": true, - "requires": { - "mime-db": "1.45.0" - } - } - } - }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 092fb882e5c..16be0834744 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,6 @@ "postcss-loader": "6.1.1", "prettier": "2.4.0", "process": "0.11.10", - "raw-loader": "4.0.2", "rollup": "2.56.3", "rollup-plugin-ignore": "1.0.10", "rollup-plugin-polyfill-node": "0.7.0", @@ -116,7 +115,6 @@ "tap-spec": "5.0.0", "tape": "5.3.1", "tape-catch": "1.0.6", - "url-loader": "4.1.1", "webpack": "5.52.1", "webpack-bundle-analyzer": "4.4.2", "webpack-cli": "4.8.0", diff --git a/webpack.common.js b/webpack.common.js index 9009dc7b23c..d45e7f995e7 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -67,7 +67,7 @@ function configureVtkRules() { }, { test: /\.svg$/, - use: [{ loader: 'raw-loader' }], + type: 'asset/source', }, { test: /\.worker\.js$/,