build: Fix webpack terser configurations

Author: SettingDust

monkey.config.ts

@@ -4,6 +4,6 @@ export default {
   name: 'Good Monkey',
   description: 'A good monkey',
   version: '1.0.0',
-  match: ['http*://*.google.com/*', 'http*://google.com/*'],
+  match: ['http*://*.github.com/*'],
   grant: ['GM_addStyle']
 } as Monkey.Metadata

package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "dist/good-monkey.user.js",
   "scripts": {
-    "build": "webpack",
-    "dev": "webpack -c webpack.dev.config.ts",
+    "build": "webpack && prettier --write dist/*.js",
+    "dev": "webpack --watch -c webpack.dev.config.ts",
     "format": "prettier --write **/*.ts"
   },
   "repository": {
@@ -24,24 +24,23 @@
   "homepage": "https://github.com/SettingDust/webpack-tampermonkey#readme",
   "devDependencies": {
     "@tsconfig/recommended": "^1.0.1",
-    "@types/node": "^15.12.1",
-    "@types/webpack-dev-server": "^3.11.4",
-    "autoprefixer": "^10.2.6",
-    "chalk": "^4.1.1",
-    "css-loader": "^5.2.6",
-    "cssnano": "^5.0.5",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.3.0",
-    "prettier": "^2.3.0",
-    "sass": "^1.34.1",
-    "sass-loader": "^12.0.0",
+    "@types/node": "^16.7.13",
+    "autoprefixer": "^10.3.4",
+    "chalk": "^4.1.2",
+    "css-loader": "^6.2.0",
+    "cssnano": "^5.0.8",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
+    "prettier": "^2.3.2",
+    "sass": "^1.39.0",
+    "sass-loader": "^12.1.0",
+    "terser-webpack-plugin": "^5.2.3",
     "to-string-loader": "github:gajus/to-string-loader",
-    "ts-loader": "^9.2.2",
-    "ts-node": "^10.0.0",
-    "typescript": "^4.3.2",
+    "ts-loader": "^9.2.5",
+    "ts-node": "^10.2.1",
+    "typescript": "^4.4.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.52.0",
+    "webpack-cli": "^4.8.0"
   }
 }

scripts/banner.ts

@@ -1,7 +1,6 @@
 import metadata from '../monkey.config'
 
-const paddingLength =
-  1 + Object.keys(metadata).reduce((prev, curr) => (curr.length > prev ? curr.length : prev), 0)
+const paddingLength = 1 + Object.keys(metadata).reduce((prev, curr) => (curr.length > prev ? curr.length : prev), 0)
 
 const prefix = (arr: string[]): string[] => {
   const newArr = arr.map((it) => `// ${it}`)
@@ -19,9 +18,8 @@ const sign = (arr: string[]): string[] => {
 export default (dev: boolean = false): string => {
   const metas: string[] = []
   if (dev) {
-    if (!metadata.require)
-      metadata.require = []
-    metadata.require.push('file://' + __dirname + '\\build\\' + metadata.name.toLowerCase().replace(' ', '-') + '.js')
+    if (!metadata.require) metadata.require = []
+    metadata.require.push('file://' + __dirname + '\\build\\' + metadata.name.toLowerCase().replace(' ', '-') + '.user.js')
   }
   for (const [key, value] of Object.entries(metadata)) {
     if (Array.isArray(value) && value.length) {

src/index.ts

@@ -1 +1,2 @@
 GM_addStyle(require('./styles/style.scss'))
+GM_log(GM_addStyle, require('./styles/style.scss'))

webpack.config.ts

@@ -5,14 +5,29 @@ import banner from './scripts/banner'
 import metadata from './monkey.config'
 import LimitChunkCountPlugin = webpack.optimize.LimitChunkCountPlugin
 import BannerPlugin = webpack.BannerPlugin
+import TerserPlugin from 'terser-webpack-plugin'
 
 // noinspection JSUnusedGlobalSymbols
 export default {
   entry: './src/index.ts',
   output: {
     filename: metadata.name.toLowerCase().replace(' ', '-') + '.user.js'
   },
-  mode: 'production',
+  mode: 'none',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          mangle: false,
+          format: {
+            comments: (node, comment) => comment.type === 'comment1'
+              && /(^\s==\/?UserScript==)|(^\s@.+\s+.+$)|(^\s$)/.test(comment.value)
+          }
+        }
+      })
+    ]
+  },
   module: {
     rules: [
       {
@@ -29,18 +44,6 @@ export default {
       }
     ]
   },
-  optimization: {
-    minimizer: [
-      () => ({
-        terserOptions: {
-          mangle: false,
-          output: {
-            beautify: true
-          }
-        }
-      })
-    ]
-  },
   plugins: [
     new LimitChunkCountPlugin({ maxChunks: 1 }),
     new BannerPlugin({

webpack.dev.config.ts

@@ -17,22 +17,15 @@ export default {
   entry: './src/index.ts',
   output: {
     path: path.resolve(__dirname, 'build'),
-    filename: metadata.name.toLowerCase().replace(' ', '-') + '.js'
+    filename: metadata.name.toLowerCase().replace(' ', '-') + '.user.js'
   },
   mode: 'development',
   devtool: 'inline-source-map',
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        use: {
-          loader: 'ts-loader',
-          options: {
-            compilerOptions: {
-              sourceMap: true
-            }
-          }
-        }
+        use: 'ts-loader'
       },
       {
         test: /\.s[ac]ss$/i,