From bbe6f3fa6c4f56306cf8c5e4b52cf762bc6c0c86 Mon Sep 17 00:00:00 2001 From: Jen Breese-Kauth Date: Fri, 15 Sep 2023 22:00:00 +0000 Subject: [PATCH] fixup to the webpack --- themes/stanford_basic/package.json | 33 ++-- themes/stanford_basic/webpack.config.js | 195 ++++++++++++++++++------ 2 files changed, 169 insertions(+), 59 deletions(-) diff --git a/themes/stanford_basic/package.json b/themes/stanford_basic/package.json index 250c413d6..b7faffc6e 100644 --- a/themes/stanford_basic/package.json +++ b/themes/stanford_basic/package.json @@ -11,27 +11,42 @@ "distAssets": "dist/assets" }, "scripts": { - "build": "webpack --mode=development --display-error-details", + "build": "webpack --mode=development", "publish": "webpack --mode=production", "watch": "webpack --mode=development --watch", "lint:js": "eslint -c .eslintrc 'src/js'", "lint:sass": "sass-lint -c .sass-lint.yml '**/*.scss' -v -q -i 'vendor/**/*.scss, node_modules/**/*.scss'" }, "devDependencies": { - "@babel/core": "^7.22.1", - "@babel/preset-env": "^7.22.4", - "assets-webpack-plugin": "^7.1.1", - "babel-loader": "^9.1.2", + "decanter": "github:SU-SWS/decanter#task/package-updates", + "postcss-preset-env": "^8.4.2", + "@babel/core": "^7.15.8", + "@babel/preset-env": "^7.15.8", + "@babel/polyfill": "^7.12.1", + "drupal-behaviors-loader": "^1.0.1", + "element-closest-polyfill": "^1.0.0", + "element-matches-polyfill": "^1.0.0", + "element-qsa-scope": "^1.1.0", + "es6-object-assign": "^1.1.0", + "auto-changelog": "^2.3.0", + "autoprefixer": "^10.4.14", + "babel-loader": "^9.1.3", + "caniuse-lite": "^1.0", "css-loader": "^6.8.1", "css-minimizer-webpack-plugin": "^5.0.1", - "decanter": "github:SU-SWS/decanter#task/package-updates", + "custom-event-polyfill": "^1.0", "filemanager-webpack-plugin": "^8.0", + "html-webpack-plugin": "^5.5.3", "mini-css-extract-plugin": "^2.7.6", + "node-pre-gyp": "^0.17.0", "node-sass": "^9.0.0", - "postcss-loader": "^7.3.2", - "postcss-preset-env": "^8.4.2", - "sass-loader": "^13.3.1", + "postcss": "^8.4.27", + "postcss-loader": "^7.0", + "raw-loader": "^4.0.1", + "sass-lint": "^1.13", + "sass-loader": "^13.3.2", "style-loader": "^3.3.3", + "twig-html-loader": "^0.1.9", "webpack": "^5.88.2", "webpack-assets-manifest": "^5.1", "webpack-cli": "^5.1.4", diff --git a/themes/stanford_basic/webpack.config.js b/themes/stanford_basic/webpack.config.js index 103f91004..25baa80bd 100644 --- a/themes/stanford_basic/webpack.config.js +++ b/themes/stanford_basic/webpack.config.js @@ -1,70 +1,165 @@ -const config = require("./src/config"); -const Webpack = require("webpack"); -const AssetsWebpackPlugin = require('assets-webpack-plugin'); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const OptimizeCSSAssetsPlugin = require("css-minimizer-webpack-plugin"); +/* eslint-disable no-undef */ +/** + * Decanter 6 - Webpack Configuration + */ -var webpackConfig = { +// Requires / Dependencies +const path = require('path'); +const FileManagerPlugin = require('filemanager-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); +const WebpackAssetsManifest = require('webpack-assets-manifest'); +const TerserPlugin = require('terser-webpack-plugin'); + +// Paths +const npmPackage = 'node_modules'; +const srcDir = path.resolve(__dirname, 'src'); +const outputDir = path.resolve(__dirname, 'dist'); +// process.env.NODE_ENV is NOT set, so use the name of the npm script as the clue. +const devMode = process.env.npm_lifecycle_event !== 'publish'; + +// Module Exports. +module.exports = { + name: 's', + // Define the entry points for which webpack builds a dependency graph. entry: { - "admin": ["/src/scss/admin/index.scss"], - "base": ["/src/js/base.js"], - "behaviors": ["/src/js/behaviors.js"], - "ckeditor": ["/src/scss/ckeditor.scss"], - "ckeditor5": ["/src/scss/ckeditor5.scss"], - "components": ["/src/scss/components/index.scss"], - "layout": ["/src/scss/layout/index.scss"], - "print": ["/src/scss/print/index.scss"], - "search-page": ["/src/scss/pages/search/index.scss"], - "state": ["/src/scss/state/index.scss"], - "theme": ["/src/scss/theme/index.scss"], - "user_login": ["/src/scss/admin/user_login.scss"], - "content/policy":["/src/scss/content/policy/index.scss"], + "admin": "/src/scss/admin/index.scss", + "base": "/src/js/base.js", + "behaviors": "/src/js/behaviors.js", + "ckeditor": "/src/scss/ckeditor.scss", + "ckeditor5": "/src/scss/ckeditor5.scss", + "components": "/src/scss/components/index.scss", + "layout": "/src/scss/layout/index.scss", + "print": "/src/scss/print/index.scss", + "search-page": "/src/scss/pages/search/index.scss", + "state": "/src/scss/state/index.scss", + "theme": "/src/scss/theme/index.scss", + "user_login": "/src/scss/admin/user_login.scss", + "content/policy":"/src/scss/content/policy/index.scss", }, + // Where should I output the assets. output: { - path: config.distFolder, filename: '[name].js', - publicPath: config.publicPath, - clean: true + path: path.resolve(__dirname, outputDir + '/js'), + clean: true, + assetModuleFilename: '../assets/[name][ext]' + }, + // Allows for map files. + devtool: 'source-map', + resolve: { + alias: { + './@fortawesome': path.resolve(__dirname, npmPackage, '@fortawesome'), + 'basic-assets': path.resolve(__dirname, 'src/assets'), + 'decanter-assets': path.resolve(__dirname, npmPackage, 'decanter/core/src/img'), + 'fa-fonts': path.resolve(__dirname, npmPackage, '@fortawesome/fontawesome-free/webfonts') + } + }, + // Optimizations that are triggered by production mode. + optimization: { + moduleIds: 'deterministic', + minimize: !devMode, + minimizer: [ + new CssMinimizerPlugin(), + new TerserPlugin() + ] }, - mode: config.isProd ? "production" : "development", + plugins: [ + // A webpack plugin to manage files before or after the build. + // Used here to: + // - clean all generated files (js AND css) prior to building + // - copy generated files to the styleguide after building + // Copying to the styleguide must happen in this build because the 2 configs + // run asynchronously, and the kss build finishes before this build generates + // the assets that need to be copied. + // https://www.npmjs.com/package/filemanager-webpack-plugin + new FileManagerPlugin({ + events: { + onStart: { + delete: [outputDir + '/**/*'] + }, + onEnd: { + copy: [ + { + source: npmPackage + "/decanter/core/src/templates/**/*.twig", + destination: outputDir + "/templates/decanter/" + }, + ] + } + } + }), + // This plugin extracts CSS into separate files. It creates a CSS file per + // JS file which contains CSS. It supports On-Demand-Loading of CSS and + // SourceMaps. + // https://github.com/webpack-contrib/mini-css-extract-plugin + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: '../css/[name].css', + chunkFilename: '../css/[id].css' + }), + // This Webpack plugin will generate a JSON file that matches the original + // filename with the hashed version. + // https://github.com/webdeveric/webpack-assets-manifest + new WebpackAssetsManifest({ + output: 'assets.json' + }) + ], module: { rules: [ + // Apply babel ES6 compilation to JavaScript files. { - test: /\.m?js$/, - exclude: /(node_modules)/, + test: /\.js$/, + exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } - }, + } }, + // Apply Plugins to SCSS/SASS files. { - test: /\.(sa|sc|c)ss$/, + test: /\.s[ac]ss$/, use: [ - config.isProd ? { loader: MiniCssExtractPlugin.loader } : 'style-loader', - 'css-loader', - 'postcss-loader', - 'sass-loader' - ], + MiniCssExtractPlugin.loader, + // CSS Loader. Generate sourceMaps. + { + loader: 'css-loader', + options: { + sourceMap: true, + url: true + } + }, + // Post CSS. Run autoprefixer plugin. + { + loader: 'postcss-loader', + options: { + sourceMap: true + } + }, + // SASS Loader. Add compile paths to include bourbon. + { + loader: 'sass-loader', + options: { + sassOptions: { + sourceMap: true, + lineNumbers: true, + outputStyle: 'nested', + precision: 10, + includePaths: [ + path.resolve(__dirname, npmPackage, 'bourbon/core'), + path.resolve(__dirname, srcDir, 'scss'), + path.resolve(__dirname, npmPackage) + ] + } + } + } + ] + }, + { + test: /\.css$/i, + use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] - }, - plugins: [ - new AssetsWebpackPlugin({path: config.distFolder}), - new MiniCssExtractPlugin({ - filename: '[name].css', - }), - ], - optimization: { - minimizer: [ - new OptimizeCSSAssetsPlugin(), - ] } - -}; - -if (config.hmrEnabled) { - webpackConfig.plugins.push(new Webpack.HotModuleReplacementPlugin()); -} -module.exports = webpackConfig; \ No newline at end of file +}; \ No newline at end of file