Improve web infrastructure

Upgrade npm packages that were locked to old versions due to now-resolved problems
Remove unused/unnecessary dependencies and their configurations
Fix VS Code format on save
Fix VS Code removing EOF newline in JSON files in conflict with npm
Remove JSON files from ESLint because it doesn't properly support JSON
Add detailed comments to web-related configuration files
This commit is contained in:
Keavon Chambers
2021-08-27 02:19:30 -07:00
parent 0b5423b516
commit 7138580ea3
9 changed files with 380 additions and 1067 deletions
+24 -5
View File
@@ -1,18 +1,25 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
const path = require("path");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
module.exports = {
lintOnSave: "warning",
// https://cli.vuejs.org/guide/webpack.html
chainWebpack: (config) => {
// Rust wasm bindgen https://github.com/rustwasm/wasm-bindgen
// WASM Pack Plugin integrates compiled Rust code (.wasm) and generated wasm-bindgen code (.js) with the webpack bundle
// Use this JS to import the bundled Rust entry points: const wasm = import("@/../wasm/pkg");
// Then call WASM functions with: (await wasm).function_name()
// https://github.com/wasm-tool/wasm-pack-plugin
config
// https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
.plugin("wasm-pack")
.use(WasmPackPlugin)
.init(
(Plugin) =>
new Plugin({
crateDirectory: path.resolve(__dirname, "wasm"),
// Remove when this issue is resolved https://github.com/wasm-tool/wasm-pack-plugin/issues/93
outDir: path.resolve(__dirname, "wasm/pkg"),
watchDirectories: [
path.resolve(__dirname, "../editor"),
path.resolve(__dirname, "../graphene"),
@@ -23,8 +30,20 @@ module.exports = {
)
.end();
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule.use("vue-loader").loader("vue-loader").end().use("vue-svg-loader").loader("vue-svg-loader");
// Vue SVG Loader enables importing .svg files into .vue single-file components and using them directly in the HTML
// https://vue-svg-loader.js.org/
config.module
// Replace Vue's existing base loader by first clearing it (https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule)
.rule("svg")
.uses.clear()
.end()
// Add vue-loader as a loader
.use("vue-loader")
.loader("vue-loader")
.end()
// Add vue-svg-loader as a loader
.use("vue-svg-loader")
.loader("vue-svg-loader")
.end();
},
};