wip

package.json

@@ -157,6 +157,7 @@
 		"serve-favicon": "2.4.5",
 		"sortablejs": "1.7.0",
 		"speakeasy": "2.0.0",
+		"string-replace-loader": "^1.3.0",
 		"string-replace-webpack-plugin": "0.1.3",
 		"style-loader": "0.20.1",
 		"stylus": "0.54.5",
@@ -182,6 +183,7 @@
 		"vue-template-compiler": "^2.5.13",
 		"web-push": "3.2.5",
 		"webpack": "3.10.0",
+		"webpack-replace-loader": "^1.3.0",
 		"websocket": "1.0.25",
 		"xev": "2.0.0"
 	}

webpack/module/rules/base64.ts

@@ -8,13 +8,11 @@ export default () => ({
 	enforce: 'pre',
 	test: /\.(vue|js)$/,
 	exclude: /node_modules/,
-	use: [{
-		loader: 'replace-string-loader',
-		options: {
-			search: /%base64:(.+?)%/g,
-			replace: (_, key) => {
-				return fs.readFileSync(__dirname + '/../../../src/web/' + key, 'base64');
-			}
+	loader: 'string-replace-loader',
+	query: {
+		search: /%base64:(.+?)%/g,
+		replace: (_, key) => {
+			return fs.readFileSync(__dirname + '/../../../src/web/' + key, 'base64');
 		}
-	}]
+	}
 });

webpack/module/rules/collapse-spaces.ts

 import * as fs from 'fs';
 const minify = require('html-minifier').minify;
-const StringReplacePlugin = require('string-replace-webpack-plugin');
 
 export default () => ({
 	enforce: 'pre',
 	test: /\.vue$/,
 	exclude: /node_modules/,
-	loader: StringReplacePlugin.replace({
-		replacements: [{
-			pattern: /^<template>([\s\S]+?)\r?\n<\/template>/, replacement: html => {
-				return minify(html, {
-					collapseWhitespace: true,
-					collapseInlineTagWhitespace: true,
-					keepClosingSlash: true
-				});
-			}
-		}]
-	})
+	loader: 'string-replace-loader',
+	query: {
+		search: /^<template>([\s\S]+?)\r?\n<\/template>/,
+		replace: html => {
+			return minify(html, {
+				collapseWhitespace: true,
+				collapseInlineTagWhitespace: true,
+				keepClosingSlash: true
+			});
+		}
+	}
 });

webpack/module/rules/fa.ts

@@ -8,11 +8,9 @@ export default () => ({
 	enforce: 'pre',
 	test: /\.(vue|js|ts)$/,
 	exclude: /node_modules/,
-	use: [{
-		loader: 'replace-string-loader',
-		options: {
-			search: pattern,
-			replace: replacement
-		}
-	}]
+	loader: 'string-replace-loader',
+	query: {
+		search: pattern,
+		replace: replacement
+	}
 });

webpack/module/rules/i18n.ts

@@ -11,12 +11,10 @@ export default lang => {
 		enforce: 'pre',
 		test: /\.(vue|js|ts)$/,
 		exclude: /node_modules/,
-		use: [{
-			loader: 'replace-string-loader',
-			options: {
-				search: replacer.pattern,
-				replace: replacer.replacement
-			}
-		}]
+		loader: 'string-replace-loader',
+		query: {
+			search: replacer.pattern,
+			replace: replacer.replacement
+		}
 	};
 };

webpack/module/rules/index.ts

 import i18n from './i18n';
 import fa from './fa';
 //import base64 from './base64';
-import themeColor from './theme-color';
 import vue from './vue';
 import stylus from './stylus';
 import typescript from './typescript';
 import collapseSpaces from './collapse-spaces';
 
 export default lang => [
-	collapseSpaces(),
-	i18n(lang),
-	fa(),
+	//collapseSpaces(),
+	//i18n(lang),
+	//fa(),
 	//base64(),
-	themeColor(),
 	vue(),
 	stylus(),
 	typescript()

webpack/module/rules/theme-color.ts

-/**
- * Theme color provider
- */
-
-const constants = require('../../../src/const.json');
-
-export default () => ({
-	enforce: 'pre',
-	test: /\.vue$/,
-	exclude: /node_modules/,
-	use: [{
-		loader: 'replace-string-loader',
-		options: {
-			search: '$theme-color-foreground',
-			replace: constants.themeColorForeground,
-			flags: 'g'
-		}
-	}, {
-		loader: 'replace-string-loader',
-		options: {
-			search: '$theme-color',
-			replace: constants.themeColor,
-			flags: 'g'
-		}
-	}]
-});

webpack/module/rules/vue.ts

@@ -2,12 +2,30 @@
  * Vue
  */
 
+const constants = require('../../../src/const.json');
+
 export default () => ({
 	test: /\.vue$/,
 	exclude: /node_modules/,
-	loader: 'vue-loader',
-	options: {
-		cssSourceMap: false,
-		preserveWhitespace: false
-	}
+	use: [{
+		loader: 'vue-loader',
+		options: {
+			cssSourceMap: false,
+			preserveWhitespace: false
+		}
+	}, {
+		loader: 'webpack-replace-loader',
+		options: {
+			search: '$theme-color',
+			replace: constants.themeColor,
+			attr: 'g'
+		}
+	}, {
+		loader: 'webpack-replace-loader',
+		query: {
+			search: '$theme-color-foreground',
+			replace: constants.themeColorForeground,
+			attr: 'g'
+		}
+	}]
 });