Merge pull request #3966 from thornbill/css-plugin

Add mini css plugin for production builds
This commit is contained in:
Bill Thornton 2022-09-29 12:01:33 -04:00 committed by GitHub
commit 459fc0bbe7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 6 deletions

62
package-lock.json generated
View File

@ -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",

View File

@ -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\"",

View File

@ -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;