From 87c3631e5e72c16a7103bf65a93f3dd92654409a Mon Sep 17 00:00:00 2001 From: Rui Salgado Date: Wed, 8 May 2019 17:58:18 +0100 Subject: [PATCH 1/3] Remove dead code --- project_template/config/uglify.js | 19 ------------------- project_template/webpack.config.js | 1 - 2 files changed, 20 deletions(-) delete mode 100644 project_template/config/uglify.js diff --git a/project_template/config/uglify.js b/project_template/config/uglify.js deleted file mode 100644 index 1075355..0000000 --- a/project_template/config/uglify.js +++ /dev/null @@ -1,19 +0,0 @@ -module.exports = { - output: { - comments: false - }, - compress: { - unused: true, - warnings: false, - comparisons: true, - conditionals: true, - negate_iife: false, - dead_code: true, - if_return: true, - join_vars: true, - evaluate: true, - drop_debugger: true, - drop_console: false - }, - sourceMap: true -}; diff --git a/project_template/webpack.config.js b/project_template/webpack.config.js index 68043bd..40946fe 100644 --- a/project_template/webpack.config.js +++ b/project_template/webpack.config.js @@ -1,7 +1,6 @@ const path = require("path"); const webpack = require("webpack"); const babel = require("./config/babel"); -const uglify = require("./config/uglify"); const env = process.env.NODE_ENV || "development"; const useCordova = (process.env.USE_CORDOVA || "false") === "true"; From edad722bc3dac223383d7536a035aa69a3dd0ef1 Mon Sep 17 00:00:00 2001 From: Rui Salgado Date: Wed, 8 May 2019 18:02:35 +0100 Subject: [PATCH 2/3] Webpack plugins: replace extract-text with mini-css-extract --- project_template/package.json | 4 +-- project_template/src/index.html | 4 +-- project_template/webpack.config.js | 50 +++++++++++++--------------- project_template/yarn.lock | 52 +++++++++++++++++++++++------- 4 files changed, 68 insertions(+), 42 deletions(-) diff --git a/project_template/package.json b/project_template/package.json index b4c0e41..51bfb25 100644 --- a/project_template/package.json +++ b/project_template/package.json @@ -58,7 +58,6 @@ "eslint-plugin-compat": "^1.0.4", "eslint-plugin-prettier": "^2.1.2", "eslint-plugin-react": "^7.1.0", - "extract-text-webpack-plugin": "4.0.0-beta.0", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "husky": "^0.14.3", @@ -67,11 +66,12 @@ "karma-chai": "^0.1.0", "karma-chai-plugins": "^0.9.0", "karma-chrome-launcher": "^2.2.0", + "karma-junit-reporter": "^1.2.0", "karma-mocha": "^1.3.0", "karma-mocha-reporter": "^2.2.0", - "karma-junit-reporter": "^1.2.0", "karma-webpack": "^4.0.0-beta.0", "lint-staged": "^8.1.5", + "mini-css-extract-plugin": "^0.6.0", "mocha": "^6.0.0", "nightwatch": "^1.0.0", "node-sass": "^4.5.3", diff --git a/project_template/src/index.html b/project_template/src/index.html index 0427c1a..0c21c30 100644 --- a/project_template/src/index.html +++ b/project_template/src/index.html @@ -29,8 +29,8 @@ <% for (var chunk in htmlWebpackPlugin.files.chunks) { %> <% } %> -<% for (var css of htmlWebpackPlugin.files.css.filter((file) => file.indexOf("styles") != -1)) { %> +<% for (var css of htmlWebpackPlugin.files.css.filter((file) => file.indexOf("app") != -1)) { %> - <% } %> +<% } %> diff --git a/project_template/webpack.config.js b/project_template/webpack.config.js index 40946fe..3564878 100644 --- a/project_template/webpack.config.js +++ b/project_template/webpack.config.js @@ -9,15 +9,12 @@ const hotReload = process.env.LIVERELOAD === "true" && !isProd; const out = path.resolve(__dirname, "dist"); const exclusions = /node_modules/; -const ExtractText = require("extract-text-webpack-plugin"); -const extractShellCss = new ExtractText("shell.[hash].css"); -const extractOtherCss = new ExtractText("styles.[hash].css"); - process.stderr.write(`Building with env = ${env}\n`); // plugin management const HTML = require("html-webpack-plugin"); const Clean = require("clean-webpack-plugin"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const SpriteLoaderPlugin = require("svg-sprite-loader/plugin"); const plugins = [ ...require("maji/lib/webpack").plugins, @@ -28,8 +25,10 @@ const plugins = [ minify: false }), new Clean(["dist"], { verbose: false, exclude: [".keep"] }), - extractShellCss, - extractOtherCss, + new MiniCssExtractPlugin({ + filename: "[name].[contenthash].css", + chunkFilename: "[id].[contenthash].css" + }), new SpriteLoaderPlugin() ]; @@ -114,31 +113,28 @@ module.exports = { { test: /\.yml$/, loader: "json-loader!yaml-loader" }, { test: /\.scss$/, - loader: isProd - ? extractOtherCss.extract({ - use: ["css-loader?modules", postcssLoader, "sass-loader"] - }) - : [ - "style-loader", - { - loader: "css-loader", - options: { - modules: true, - localIdentName: "[path][name]__[local]--[hash:base64:5]" - } - }, - postcssLoader, - "sass-loader" - ], + use: [ + isProd ? MiniCssExtractPlugin.loader : "style-loader", + { + loader: "css-loader", + options: { + modules: true, + localIdentName: "[path][name]__[local]--[hash:base64:5]" + } + }, + postcssLoader, + "sass-loader" + ], exclude: /shell.scss$/ }, { test: /shell.scss$/, - loader: isProd - ? extractShellCss.extract({ - use: ["css-loader", postcssLoader, "sass-loader"] - }) - : ["style-loader", "css-loader", postcssLoader, "sass-loader"] + use: [ + isProd ? MiniCssExtractPlugin.loader : "style-loader", + "css-loader", + postcssLoader, + "sass-loader" + ] }, { test: /\.svg$/, diff --git a/project_template/yarn.lock b/project_template/yarn.lock index 5d0ced5..bf34851 100644 --- a/project_template/yarn.lock +++ b/project_template/yarn.lock @@ -1307,7 +1307,7 @@ async@^1.4.2, async@^1.5.2: resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo= -async@^2.0.0, async@^2.4.1, async@^2.5.0, async@^2.6.1: +async@^2.0.0, async@^2.5.0, async@^2.6.1: version "2.6.2" resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381" integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg== @@ -4008,16 +4008,6 @@ extglob@^2.0.2, extglob@^2.0.4: snapdragon "^0.8.1" to-regex "^3.0.1" -extract-text-webpack-plugin@4.0.0-beta.0: - version "4.0.0-beta.0" - resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz#f7361d7ff430b42961f8d1321ba8c1757b5d4c42" - integrity sha512-Hypkn9jUTnFr0DpekNam53X47tXn3ucY08BQumv7kdGgeVUBLq3DJHJTi6HNxv4jl9W+Skxjz9+RnK0sJyqqjA== - dependencies: - async "^2.4.1" - loader-utils "^1.1.0" - schema-utils "^0.4.5" - webpack-sources "^1.1.0" - extract-zip@^1.6.7: version "1.6.7" resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9" @@ -6859,6 +6849,16 @@ mimic-fn@^1.0.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022" integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ== +mini-css-extract-plugin@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.6.0.tgz#a3f13372d6fcde912f3ee4cd039665704801e3b9" + integrity sha512-79q5P7YGI6rdnVyIAV4NXpBQJFWdkzJxCim3Kog4078fM0piAaFlwocqbejdWtLW1cEzCexPrh6EdyFsPgVdAw== + dependencies: + loader-utils "^1.1.0" + normalize-url "^2.0.1" + schema-utils "^1.0.0" + webpack-sources "^1.1.0" + minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -7355,6 +7355,15 @@ normalize-url@^1.4.0: query-string "^4.1.0" sort-keys "^1.0.0" +normalize-url@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6" + integrity sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw== + dependencies: + prepend-http "^2.0.0" + query-string "^5.0.1" + sort-keys "^2.0.0" + npm-bundled@^1.0.1: version "1.0.6" resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd" @@ -8590,6 +8599,11 @@ prepend-http@^1.0.0, prepend-http@^1.0.1: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= +prepend-http@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" + integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= + preserve@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" @@ -8798,6 +8812,15 @@ query-string@^4.1.0, query-string@^4.3.2: object-assign "^4.1.0" strict-uri-encode "^1.0.0" +query-string@^5.0.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb" + integrity sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw== + dependencies: + decode-uri-component "^0.2.0" + object-assign "^4.1.0" + strict-uri-encode "^1.0.0" + querystring-es3@^0.2.0, querystring-es3@~0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -9995,6 +10018,13 @@ sort-keys@^1.0.0: dependencies: is-plain-obj "^1.0.0" +sort-keys@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128" + integrity sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg= + dependencies: + is-plain-obj "^1.0.0" + source-list-map@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" From 1539981a13874fabc2b2a586d65c42b905beab7a Mon Sep 17 00:00:00 2001 From: Rui Salgado Date: Wed, 8 May 2019 18:03:56 +0100 Subject: [PATCH 3/3] Simplify asset injection Rely on html-webpack-plugin to do the heavy lifting for us --- project_template/src/index.html | 12 ------------ project_template/webpack.config.js | 4 ++-- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/project_template/src/index.html b/project_template/src/index.html index 0c21c30..bc1735b 100644 --- a/project_template/src/index.html +++ b/project_template/src/index.html @@ -18,19 +18,7 @@ document.querySelector('html').className = 'ios-standalone'; } - -<% for (var css of htmlWebpackPlugin.files.css.filter((file) => file.indexOf("shell") != -1)) { %> - -<% } %> -<% for (var chunk in htmlWebpackPlugin.files.chunks) { %> - -<% } %> -<% for (var css of htmlWebpackPlugin.files.css.filter((file) => file.indexOf("app") != -1)) { %> - -<% } %> diff --git a/project_template/webpack.config.js b/project_template/webpack.config.js index 3564878..0af285c 100644 --- a/project_template/webpack.config.js +++ b/project_template/webpack.config.js @@ -21,8 +21,8 @@ const plugins = [ new HTML({ template: "src/index.html", useCordova, - inject: false, - minify: false + inject: true, + minify: isProd }), new Clean(["dist"], { verbose: false, exclude: [".keep"] }), new MiniCssExtractPlugin({