diff --git a/configs/webpack/common.js b/configs/webpack/common.js index 547aa19..1873f82 100644 --- a/configs/webpack/common.js +++ b/configs/webpack/common.js @@ -2,9 +2,11 @@ const { resolve } = require('path') const { CheckerPlugin, TsConfigPathsPlugin } = require('awesome-typescript-loader') const StyleLintPlugin = require('stylelint-webpack-plugin') +const MiniCssExtractPlugin = require("mini-css-extract-plugin") const HtmlWebpackPlugin = require('html-webpack-plugin') -const OfflinePlugin = require('offline-plugin') +// const OfflinePlugin = require('offline-plugin') const autoprefixer = require('autoprefixer') +const devMode = process.env.NODE_ENV !== 'production' module.exports = { resolve: { @@ -34,7 +36,7 @@ module.exports = { { test: /\.scss$/, loaders: [ - 'style-loader', + devMode ? 'style-loader' : MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: [autoprefixer] } }, 'sass-loader', @@ -53,15 +55,21 @@ module.exports = { new CheckerPlugin(), new StyleLintPlugin(), new HtmlWebpackPlugin({ template: 'index.html.ejs' }), - new OfflinePlugin({ - ServiceWorker: { - events: true, - }, - externals: [ - 'https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js', - 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js', - ], - }), + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: devMode ? '[name].css' : '[name].[hash].css', + chunkFilename: devMode ? '[id].css' : '[id].[hash].css', + }) + // new OfflinePlugin({ + // ServiceWorker: { + // events: true, + // }, + // externals: [ + // 'https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js', + // 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js', + // ], + // }), ], // externals: { // react: 'React', diff --git a/configs/webpack/dev.js b/configs/webpack/dev.js index baf2a68..38aa491 100644 --- a/configs/webpack/dev.js +++ b/configs/webpack/dev.js @@ -1,8 +1,8 @@ // development config const merge = require('webpack-merge') const webpack = require('webpack') -const { resolve } = require('path') -const ManifestPlugin = require('webpack-pwa-manifest') +// const { resolve } = require('path') +// const ManifestPlugin = require('webpack-pwa-manifest') const commonConfig = require('./common') module.exports = merge(commonConfig, { @@ -21,19 +21,19 @@ module.exports = merge(commonConfig, { plugins: [ new webpack.HotModuleReplacementPlugin(), // enable HMR globally new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates - new ManifestPlugin({ - name: 'Clash Development', - background_color: '#FFFFFF', - crossorigin: 'anonymous', - inject: true, - fingerprints: false, - icons: [ - { - src: resolve('src/assets/Icon.png'), - sizes: [96, 128, 192, 256], - destination: 'img/icons', - }, - ], - }), + // new ManifestPlugin({ + // name: 'Clash Development', + // background_color: '#FFFFFF', + // crossorigin: 'anonymous', + // inject: true, + // fingerprints: false, + // icons: [ + // { + // src: resolve('src/assets/Icon.png'), + // sizes: [96, 128, 192, 256], + // destination: 'img/icons', + // }, + // ], + // }), ], }) diff --git a/configs/webpack/prod.js b/configs/webpack/prod.js index 2968f66..29849da 100644 --- a/configs/webpack/prod.js +++ b/configs/webpack/prod.js @@ -1,7 +1,7 @@ // production config const merge = require('webpack-merge') const { resolve } = require('path') -const ManifestPlugin = require('webpack-pwa-manifest') +// const ManifestPlugin = require('webpack-pwa-manifest') const commonConfig = require('./common') @@ -14,19 +14,24 @@ module.exports = merge(commonConfig, { publicPath: '/', }, plugins: [ - new ManifestPlugin({ - name: 'Clash', - background_color: '#FFFFFF', - crossorigin: 'anonymous', - inject: true, - fingerprints: false, - icons: [ - { - src: resolve('src/assets/Icon.png'), - sizes: [96, 128, 192, 256], - destination: 'img/icons', - }, - ], - }), + // new ManifestPlugin({ + // name: 'Clash', + // background_color: '#FFFFFF', + // crossorigin: 'anonymous', + // inject: true, + // fingerprints: false, + // icons: [ + // { + // src: resolve('src/assets/Icon.png'), + // sizes: [96, 128, 192, 256], + // destination: 'img/icons', + // }, + // ], + // }), ], + optimization: { + splitChunks: { + chunks: 'all' + } + } }) diff --git a/package-lock.json b/package-lock.json index 61466a8..93fad32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1621,6 +1621,48 @@ } } }, + "babel-helper-evaluate-path": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-helper-evaluate-path/download/babel-helper-evaluate-path-0.5.0.tgz", + "integrity": "sha1-pi+pxOZP9+pc6pNTF07wI6kApnw=", + "dev": true + }, + "babel-helper-flip-expressions": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-helper-flip-expressions/download/babel-helper-flip-expressions-0.4.3.tgz", + "integrity": "sha1-NpZzahKKwYvCUlS19AoizrPB0/0=", + "dev": true + }, + "babel-helper-is-nodes-equiv": { + "version": "0.0.1", + "resolved": "http://registry.npm.taobao.org/babel-helper-is-nodes-equiv/download/babel-helper-is-nodes-equiv-0.0.1.tgz", + "integrity": "sha1-NOmzALFHnd2Y7HfqC76TQt/jloQ=", + "dev": true + }, + "babel-helper-is-void-0": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-helper-is-void-0/download/babel-helper-is-void-0-0.4.3.tgz", + "integrity": "sha1-fZwBtFYee5Xb2g9u7kj1tg5nMT4=", + "dev": true + }, + "babel-helper-mark-eval-scopes": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-helper-mark-eval-scopes/download/babel-helper-mark-eval-scopes-0.4.3.tgz", + "integrity": "sha1-0kSjvvmESHJgP/tG4izorN9VFWI=", + "dev": true + }, + "babel-helper-remove-or-void": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-helper-remove-or-void/download/babel-helper-remove-or-void-0.4.3.tgz", + "integrity": "sha1-pPA7QAd6D/6I5F0HAQ3uJB/1rmA=", + "dev": true + }, + "babel-helper-to-multiple-sequence-expressions": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-helper-to-multiple-sequence-expressions/download/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz", + "integrity": "sha1-o/kk41YYgtQvz0iQeqmPeXmkWI0=", + "dev": true + }, "babel-loader": { "version": "8.0.4", "resolved": "http://registry.npm.taobao.org/babel-loader/download/babel-loader-8.0.4.tgz", @@ -1633,6 +1675,201 @@ "util.promisify": "^1.0.0" } }, + "babel-plugin-minify-builtins": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-builtins/download/babel-plugin-minify-builtins-0.5.0.tgz", + "integrity": "sha1-MeuC7RoNDv3DExL5O25HQc6Cw2s=", + "dev": true + }, + "babel-plugin-minify-constant-folding": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-constant-folding/download/babel-plugin-minify-constant-folding-0.5.0.tgz", + "integrity": "sha1-+EvI2/alYeXjUP+VriFrCtVRW24=", + "dev": true, + "requires": { + "babel-helper-evaluate-path": "^0.5.0" + } + }, + "babel-plugin-minify-dead-code-elimination": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-dead-code-elimination/download/babel-plugin-minify-dead-code-elimination-0.5.0.tgz", + "integrity": "sha1-0j71RFI4rQbord9cHPauyDW82oc=", + "dev": true, + "requires": { + "babel-helper-evaluate-path": "^0.5.0", + "babel-helper-mark-eval-scopes": "^0.4.3", + "babel-helper-remove-or-void": "^0.4.3", + "lodash.some": "^4.6.0" + } + }, + "babel-plugin-minify-flip-comparisons": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-flip-comparisons/download/babel-plugin-minify-flip-comparisons-0.4.3.tgz", + "integrity": "sha1-AMqHDLjxO0XAOLPB68DyJyk8llo=", + "dev": true, + "requires": { + "babel-helper-is-void-0": "^0.4.3" + } + }, + "babel-plugin-minify-guarded-expressions": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-guarded-expressions/download/babel-plugin-minify-guarded-expressions-0.4.3.tgz", + "integrity": "sha1-zHCbRFP9IbHzAod0RMifiEJ845c=", + "dev": true, + "requires": { + "babel-helper-flip-expressions": "^0.4.3" + } + }, + "babel-plugin-minify-infinity": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-infinity/download/babel-plugin-minify-infinity-0.4.3.tgz", + "integrity": "sha1-37h2obCKBldjhO8/kuZTumB7Oco=", + "dev": true + }, + "babel-plugin-minify-mangle-names": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-mangle-names/download/babel-plugin-minify-mangle-names-0.5.0.tgz", + "integrity": "sha1-vN21B8kdLJnhOL1rF6GcPCceP9M=", + "dev": true, + "requires": { + "babel-helper-mark-eval-scopes": "^0.4.3" + } + }, + "babel-plugin-minify-numeric-literals": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-numeric-literals/download/babel-plugin-minify-numeric-literals-0.4.3.tgz", + "integrity": "sha1-jk/VYcefeAEob/YOjF/Z3u6TwLw=", + "dev": true + }, + "babel-plugin-minify-replace": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-replace/download/babel-plugin-minify-replace-0.5.0.tgz", + "integrity": "sha1-0+LJlGyQlsBw78lnYc4ojsXD9xw=", + "dev": true + }, + "babel-plugin-minify-simplify": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-simplify/download/babel-plugin-minify-simplify-0.5.0.tgz", + "integrity": "sha1-HwkAGK+5DYtU09An/YpJJ/JD2m8=", + "dev": true, + "requires": { + "babel-helper-flip-expressions": "^0.4.3", + "babel-helper-is-nodes-equiv": "^0.0.1", + "babel-helper-to-multiple-sequence-expressions": "^0.5.0" + } + }, + "babel-plugin-minify-type-constructors": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-plugin-minify-type-constructors/download/babel-plugin-minify-type-constructors-0.4.3.tgz", + "integrity": "sha1-G8bxW4f3qxCF1CszC3F2V6IVZQA=", + "dev": true, + "requires": { + "babel-helper-is-void-0": "^0.4.3" + } + }, + "babel-plugin-transform-inline-consecutive-adds": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-inline-consecutive-adds/download/babel-plugin-transform-inline-consecutive-adds-0.4.3.tgz", + "integrity": "sha1-Mj1Ho+pjqDp6w8gRro5pQfrysNE=", + "dev": true + }, + "babel-plugin-transform-member-expression-literals": { + "version": "6.9.4", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-member-expression-literals/download/babel-plugin-transform-member-expression-literals-6.9.4.tgz", + "integrity": "sha1-NwOcmgwzE6OUlfqsL/OmtbnQOL8=", + "dev": true + }, + "babel-plugin-transform-merge-sibling-variables": { + "version": "6.9.4", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-merge-sibling-variables/download/babel-plugin-transform-merge-sibling-variables-6.9.4.tgz", + "integrity": "sha1-hbQi/DN3tEnJ0c3kQIcgNTJAHa4=", + "dev": true + }, + "babel-plugin-transform-minify-booleans": { + "version": "6.9.4", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-minify-booleans/download/babel-plugin-transform-minify-booleans-6.9.4.tgz", + "integrity": "sha1-rLs+VqNVXdI5KOS1gtKFFi3SsZg=", + "dev": true + }, + "babel-plugin-transform-property-literals": { + "version": "6.9.4", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-property-literals/download/babel-plugin-transform-property-literals-6.9.4.tgz", + "integrity": "sha1-mMHSHiVXNlc/k+zlRFn2ziSYXTk=", + "dev": true, + "requires": { + "esutils": "^2.0.2" + } + }, + "babel-plugin-transform-regexp-constructors": { + "version": "0.4.3", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-regexp-constructors/download/babel-plugin-transform-regexp-constructors-0.4.3.tgz", + "integrity": "sha1-WLd3W2OvzzMyj66aX4j71PsLSWU=", + "dev": true + }, + "babel-plugin-transform-remove-console": { + "version": "6.9.4", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-remove-console/download/babel-plugin-transform-remove-console-6.9.4.tgz", + "integrity": "sha1-uYA2DAZzhOJLNXpYjYB9PINSd4A=", + "dev": true + }, + "babel-plugin-transform-remove-debugger": { + "version": "6.9.4", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-remove-debugger/download/babel-plugin-transform-remove-debugger-6.9.4.tgz", + "integrity": "sha1-QrcnYxyXl44estGZp67IShgznvI=", + "dev": true + }, + "babel-plugin-transform-remove-undefined": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-remove-undefined/download/babel-plugin-transform-remove-undefined-0.5.0.tgz", + "integrity": "sha1-gCCLMSJXZsYwyX+i0oiVIFbqIt0=", + "dev": true, + "requires": { + "babel-helper-evaluate-path": "^0.5.0" + } + }, + "babel-plugin-transform-simplify-comparison-operators": { + "version": "6.9.4", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-simplify-comparison-operators/download/babel-plugin-transform-simplify-comparison-operators-6.9.4.tgz", + "integrity": "sha1-9ir+CWyrDh9ootdT/fKDiIRxzrk=", + "dev": true + }, + "babel-plugin-transform-undefined-to-void": { + "version": "6.9.4", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-undefined-to-void/download/babel-plugin-transform-undefined-to-void-6.9.4.tgz", + "integrity": "sha1-viQcqBQEAwZ4t0hxcyK4nQyP4oA=", + "dev": true + }, + "babel-preset-minify": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/babel-preset-minify/download/babel-preset-minify-0.5.0.tgz", + "integrity": "sha1-4lu401kAh68CtlCWcVmnfBm/uWs=", + "dev": true, + "requires": { + "babel-plugin-minify-builtins": "^0.5.0", + "babel-plugin-minify-constant-folding": "^0.5.0", + "babel-plugin-minify-dead-code-elimination": "^0.5.0", + "babel-plugin-minify-flip-comparisons": "^0.4.3", + "babel-plugin-minify-guarded-expressions": "^0.4.3", + "babel-plugin-minify-infinity": "^0.4.3", + "babel-plugin-minify-mangle-names": "^0.5.0", + "babel-plugin-minify-numeric-literals": "^0.4.3", + "babel-plugin-minify-replace": "^0.5.0", + "babel-plugin-minify-simplify": "^0.5.0", + "babel-plugin-minify-type-constructors": "^0.4.3", + "babel-plugin-transform-inline-consecutive-adds": "^0.4.3", + "babel-plugin-transform-member-expression-literals": "^6.9.4", + "babel-plugin-transform-merge-sibling-variables": "^6.9.4", + "babel-plugin-transform-minify-booleans": "^6.9.4", + "babel-plugin-transform-property-literals": "^6.9.4", + "babel-plugin-transform-regexp-constructors": "^0.4.3", + "babel-plugin-transform-remove-console": "^6.9.4", + "babel-plugin-transform-remove-debugger": "^6.9.4", + "babel-plugin-transform-remove-undefined": "^0.5.0", + "babel-plugin-transform-simplify-comparison-operators": "^6.9.4", + "babel-plugin-transform-undefined-to-void": "^6.9.4", + "lodash.isplainobject": "^4.0.6" + } + }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", @@ -6809,11 +7046,23 @@ "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", "dev": true }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "http://registry.npm.taobao.org/lodash.isplainobject/download/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", + "dev": true + }, "lodash.mergewith": { "version": "4.6.1", "resolved": "http://registry.npm.taobao.org/lodash.mergewith/download/lodash.mergewith-4.6.1.tgz", "integrity": "sha1-Y5BX5ybDr72z59QnQcqo1uQzWSc=" }, + "lodash.some": { + "version": "4.6.0", + "resolved": "http://registry.npm.taobao.org/lodash.some/download/lodash.some-4.6.0.tgz", + "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=", + "dev": true + }, "lodash.tail": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz", @@ -7139,6 +7388,17 @@ "dom-walk": "^0.1.0" } }, + "mini-css-extract-plugin": { + "version": "0.5.0", + "resolved": "http://registry.npm.taobao.org/mini-css-extract-plugin/download/mini-css-extract-plugin-0.5.0.tgz", + "integrity": "sha1-rABZsCuWklFaY3EVsMyf7To1x7A=", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "schema-utils": "^1.0.0", + "webpack-sources": "^1.1.0" + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "http://registry.npm.taobao.org/minimalistic-assert/download/minimalistic-assert-1.0.1.tgz", diff --git a/package.json b/package.json index cad36df..8365bbc 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ }, "homepage": "https://github.com/Dreamacro/clash-dashboard", "scripts": { - "build": "npm run clean-dist && webpack -p --config=configs/webpack/prod.js", + "build": "npm run clean-dist && NODE_ENV=production webpack -p --config=configs/webpack/prod.js", "clean-dist": "rm -f -r -d dist", "lint": "npm run lint:ts && npm run lint:sass", "lint:ts": "tslint './src/**/*.ts*' --format stylish", @@ -43,10 +43,12 @@ "autoprefixer": "^9.4.2", "awesome-typescript-loader": "^5.2.1", "babel-loader": "^8.0.4", + "babel-preset-minify": "^0.5.0", "css-loader": "^2.0.0", "file-loader": "^2.0.0", "html-webpack-plugin": "^3.2.0", "image-webpack-loader": "^4.6.0", + "mini-css-extract-plugin": "^0.5.0", "offline-plugin": "^5.0.6", "postcss-loader": "^3.0.0", "react-addons-test-utils": "^15.6.2", diff --git a/src/index.html.ejs b/src/index.html.ejs index 37869f6..eab655d 100644 --- a/src/index.html.ejs +++ b/src/index.html.ejs @@ -3,7 +3,7 @@ - Hello Clash! + Clash
diff --git a/src/index.ts b/src/index.ts index bc29696..e221532 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,6 @@ import renderApp from './render' import { isClashX, setupJsBridge } from '@lib/jsBridge' -import * as OfflinePluginRuntime from 'offline-plugin/runtime' +// import * as OfflinePluginRuntime from 'offline-plugin/runtime' /** * Global entry @@ -13,18 +13,18 @@ if (isClashX()) { } // PWA install -OfflinePluginRuntime.install({ - onUpdateReady: () => { - console.log('SW Event:', 'onUpdateReady') - // Tells to new SW to take control immediately - OfflinePluginRuntime.applyUpdate() - }, - onUpdated: () => { - console.log('SW Event:', 'onUpdated') - // Reload the webpage to load into the new version - window.location.reload() - }, - onUpdateFailed: () => { - console.error('SW Event:', 'onUpdateFailed') - } -}) +// OfflinePluginRuntime.install({ +// onUpdateReady: () => { +// console.log('SW Event:', 'onUpdateReady') +// // Tells to new SW to take control immediately +// OfflinePluginRuntime.applyUpdate() +// }, +// onUpdated: () => { +// console.log('SW Event:', 'onUpdated') +// // Reload the webpage to load into the new version +// window.location.reload() +// }, +// onUpdateFailed: () => { +// console.error('SW Event:', 'onUpdateFailed') +// } +// })