From b05d653ae275a180435f30259b4ab9a47bd4ba68 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Thu, 29 Sep 2022 09:13:12 -0400 Subject: [PATCH] Add mini css plugin for production builds --- package-lock.json | 62 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 ++- webpack.common.js | 23 ++++++++++++++---- 3 files changed, 82 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 67757945a2..b9fbc4cb44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -88,6 +88,7 @@ "expose-loader": "4.0.0", "html-loader": "4.1.0", "html-webpack-plugin": "5.5.0", + "mini-css-extract-plugin": "2.6.1", "postcss": "8.4.16", "postcss-loader": "7.0.1", "postcss-preset-env": "7.8.2", @@ -9785,6 +9786,44 @@ "node": ">=4" } }, + "node_modules/mini-css-extract-plugin": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz", + "integrity": "sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==", + "dev": true, + "dependencies": { + "schema-utils": "^4.0.0" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/mini-css-extract-plugin/node_modules/schema-utils": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz", + "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.9", + "ajv": "^8.8.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.0.0" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -25551,6 +25590,29 @@ "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", "dev": true }, + "mini-css-extract-plugin": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz", + "integrity": "sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==", + "dev": true, + "requires": { + "schema-utils": "^4.0.0" + }, + "dependencies": { + "schema-utils": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz", + "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.9", + "ajv": "^8.8.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.0.0" + } + } + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", diff --git a/package.json b/package.json index 77ae5eeeaf..1e671c85de 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "expose-loader": "4.0.0", "html-loader": "4.1.0", "html-webpack-plugin": "5.5.0", + "mini-css-extract-plugin": "2.6.1", "postcss": "8.4.16", "postcss-loader": "7.0.1", "postcss-preset-env": "7.8.2", @@ -127,7 +128,7 @@ "serve": "webpack serve --config webpack.dev.js", "prepare": "node ./scripts/prepare.js", "build:development": "webpack --config webpack.dev.js", - "build:production": "webpack --config webpack.prod.js", + "build:production": "NODE_ENV=\"production\" webpack --config webpack.prod.js", "lint": "eslint \"./\"", "stylelint": "npm run stylelint:css && npm run stylelint:scss", "stylelint:css": "stylelint \"src/**/*.css\"", diff --git a/webpack.common.js b/webpack.common.js index f721c60507..fddcfe66a2 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -2,6 +2,7 @@ const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { DefinePlugin } = require('webpack'); const Assets = [ @@ -21,7 +22,11 @@ const LibarchiveWasm = [ 'libarchive.js/dist/wasm-gen/libarchive.wasm' ]; -module.exports = { +const DEV_MODE = process.env.NODE_ENV !== 'production'; + +const NODE_MODULES_REGEX = /[\\/]node_modules[\\/]/; + +const config = { context: path.resolve(__dirname, 'src'), target: 'browserslist', resolve: { @@ -92,8 +97,10 @@ module.exports = { chunks: 'all', maxInitialRequests: Infinity, cacheGroups: { - vendor: { - test: /[\\/]node_modules[\\/]/, + node_modules: { + test(module) { + return NODE_MODULES_REGEX.test(module.context); + }, name(module) { // get the name. E.g. node_modules/packageName/not/this/part.js // or node_modules/packageName @@ -155,7 +162,7 @@ module.exports = { { test: /\.s[ac]ss$/i, use: [ - 'style-loader', + DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', @@ -171,7 +178,7 @@ module.exports = { { test: /\.css$/i, use: [ - 'style-loader', + DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', @@ -205,3 +212,9 @@ module.exports = { ] } }; + +if (!DEV_MODE) { + config.plugins.push(new MiniCssExtractPlugin()); +} + +module.exports = config;