diff --git a/themes/stanford_basic/.nvmrc b/themes/stanford_basic/.nvmrc index 9306ff90b..3c032078a 100644 --- a/themes/stanford_basic/.nvmrc +++ b/themes/stanford_basic/.nvmrc @@ -1 +1 @@ -14.8.0 +18 diff --git a/themes/stanford_basic/package.json b/themes/stanford_basic/package.json index f72d29f0f..250c413d6 100644 --- a/themes/stanford_basic/package.json +++ b/themes/stanford_basic/package.json @@ -18,45 +18,25 @@ "lint:sass": "sass-lint -c .sass-lint.yml '**/*.scss' -v -q -i 'vendor/**/*.scss, node_modules/**/*.scss'" }, "devDependencies": { - "@babel/core": "^7.12.9", - "@babel/polyfill": "^7.12.1", - "@babel/preset-env": "^7.12.7", - "@fortawesome/fontawesome-free": "^5.15.1", - "autoprefixer": "^9.8.6", - "babel-loader": "^8.2.2", - "bourbon": "^5.1", - "browserslist": "^4.14.7", - "caniuse-lite": "^1.0.30001162", - "css-loader": "^2.1", - "decanter": "^6.2.19", - "dot-prop": "^5.3.0", - "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", - "eslint": "^5.16", - "extra-watch-webpack-plugin": "^1.0", - "fibers": "^4.0.2", - "file-loader": "^3.0", - "filemanager-webpack-plugin": "^2.0", - "mini-css-extract-plugin": "^0.5", - "node-gyp": "^7.1.2", - "node-pre-gyp": "^0.15.0", - "node-sass": "^4.14.1", - "optimize-css-assets-webpack-plugin": "^5.0.4", - "postcss-loader": "^3.0", - "resolve-url-loader": "^3.1.2", - "sass": "^1.29.0", - "sass-lint": "^1.13", - "sass-loader": "^7.3", - "uglifyjs-webpack-plugin": "^2.2", - "webpack": "^4.44.2", - "webpack-assets-manifest": "^3.1", - "webpack-cli": "^3.3.12", - "webpack-dev-server": "^3.11.0", - "webpack-fix-style-only-entries": "^0.4.0", - "webpack-manifest-plugin": "^2.2" + "@babel/core": "^7.22.1", + "@babel/preset-env": "^7.22.4", + "assets-webpack-plugin": "^7.1.1", + "babel-loader": "^9.1.2", + "css-loader": "^6.8.1", + "css-minimizer-webpack-plugin": "^5.0.1", + "decanter": "github:SU-SWS/decanter#task/package-updates", + "filemanager-webpack-plugin": "^8.0", + "mini-css-extract-plugin": "^2.7.6", + "node-sass": "^9.0.0", + "postcss-loader": "^7.3.2", + "postcss-preset-env": "^8.4.2", + "sass-loader": "^13.3.1", + "style-loader": "^3.3.3", + "webpack": "^5.88.2", + "webpack-assets-manifest": "^5.1", + "webpack-cli": "^5.1.4", + "webpack-dev-server": "^4.15.1", + "webpack-manifest-plugin": "^5.0" }, "description": "Stanford Drupal Base Theme", "author": "Stanford Web Services", diff --git a/themes/stanford_basic/src/config.js b/themes/stanford_basic/src/config.js new file mode 100644 index 000000000..7aca0c780 --- /dev/null +++ b/themes/stanford_basic/src/config.js @@ -0,0 +1,9 @@ +const path = require("path"); + +module.exports = { + isProd: process.env.NODE_ENV === "production", + hmrEnabled: process.env.NODE_ENV !== "production" && !process.env.NO_HMR, + distFolder: path.resolve(__dirname, "../dist"), + publicPath: "/assets", + wdsPort: 3001, +}; \ No newline at end of file diff --git a/themes/stanford_basic/webpack.config.js b/themes/stanford_basic/webpack.config.js index 2da5e0da7..103f91004 100644 --- a/themes/stanford_basic/webpack.config.js +++ b/themes/stanford_basic/webpack.config.js @@ -1,239 +1,70 @@ -/** - * Webpack Configuration File - * @type {[type]} - */ - -// ///////////////////////////////////////////////////////////////////////////// -// Requires / Dependencies ///////////////////////////////////////////////////// -// ///////////////////////////////////////////////////////////////////////////// - -const path = require('path'); -const webpack = require('webpack'); -const autoprefixer = require('autoprefixer')({ grid: true }); -const FileManagerPlugin = require('filemanager-webpack-plugin'); -const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); +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("optimize-css-assets-webpack-plugin"); -const WebpackAssetsManifest = require("webpack-assets-manifest"); -const ExtraWatchWebpackPlugin = require("extra-watch-webpack-plugin"); -const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries"); - -// ///////////////////////////////////////////////////////////////////////////// -// Paths /////////////////////////////////////////////////////////////////////// -// ///////////////////////////////////////////////////////////////////////////// - -const npmPackage = 'node_modules/'; -const srcDir = path.resolve(__dirname, "src"); -const distDir = path.resolve(__dirname, "dist"); -const srcSass = path.resolve(__dirname, process.env.npm_package_config_srcSass); -const distSass = path.resolve(__dirname, process.env.npm_package_config_distSass); -const srcJS = path.resolve(__dirname, process.env.npm_package_config_srcJS); -const distJS = path.resolve(__dirname, process.env.npm_package_config_distJS); -const srcAssets = path.resolve(__dirname, process.env.npm_package_config_srcAssets); -const distAssets = path.resolve(__dirname, process.env.npm_package_config_distAssets); - -// ///////////////////////////////////////////////////////////////////////////// -// Functions /////////////////////////////////////////////////////////////////// -// ///////////////////////////////////////////////////////////////////////////// +const OptimizeCSSAssetsPlugin = require("css-minimizer-webpack-plugin"); -// ///////////////////////////////////////////////////////////////////////////// -// Config ////////////////////////////////////////////////////////////////////// -// ///////////////////////////////////////////////////////////////////////////// - -// Start configuring webpack. var webpackConfig = { - // What am i? - name: 'stanford_basic', - // Allows for map files. - devtool: 'source-map', - // What build? entry: { - "admin": path.resolve(__dirname, srcSass, "admin/index.scss"), - "base": path.resolve(__dirname, srcJS, "base.js"), - "behaviors": path.resolve(__dirname, srcJS, "behaviors.js"), - "ckeditor": path.resolve(__dirname, srcSass, "ckeditor.scss"), - "ckeditor5": path.resolve(__dirname, srcSass, "ckeditor5.scss"), - "components": path.resolve(__dirname, srcSass, "components/index.scss"), - "layout": path.resolve(__dirname, srcSass, "layout/index.scss"), - "print": path.resolve(__dirname, srcSass, "print/index.scss"), - "search-page": path.resolve(__dirname, srcSass, "pages/search/index.scss"), - "state": path.resolve(__dirname, srcSass, "state/index.scss"), - "theme": path.resolve(__dirname, srcSass, "theme/index.scss"), - "user_login": path.resolve(__dirname, srcSass, "admin/user_login.scss"), - "content/policy":path.resolve(__dirname, srcSass, "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 put build? output: { - filename: "[name].js", - path: path.resolve(__dirname, distJS) - }, - // Relative output paths for css assets. - resolve: { - alias: { - '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') - } + path: config.distFolder, + filename: '[name].js', + publicPath: config.publicPath, + clean: true }, - // Additional module rules. + mode: config.isProd ? "production" : "development", module: { rules: [ - // Drupal behaviors need special handling with webpack. - // https://www.npmjs.com/package/drupal-behaviors-loader - { - test: /\.behavior.js$/, - exclude: /node_modules/, - options: { - enableHmr: false - }, - loader: 'drupal-behaviors-loader' - }, - // Good ol' Babel. - { - test: /\.js$/, - loader: 'babel-loader', - query: { - presets: ['@babel/preset-env'] - } - }, - // Apply Plugins to SCSS/SASS files. - { - test: /\.s[ac]ss$/, - use: [ - // Extract 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, - plugins: () => [ - autoprefixer - ] - } - }, - // SASS Loader. Add compile paths to include bourbon. - { - loader: 'sass-loader', - options: { - includePaths: [ - path.resolve(__dirname, npmPackage) - ], - sourceMap: true, - lineNumbers: true, - outputStyle: 'nested', - precision: 10 - } - } - ] - }, - // Apply plugin to font assets. - { - test: /\.(woff2?|ttf|otf|eot)$/, - loader: 'file-loader', - options: { - name: "[name].[ext]", - publicPath: "../assets/fonts", - outputPath: "../assets/fonts" - } - }, - // Apply plugins to image assets. { - test: /\.(png|jpg|gif)$/i, - use: [ - // A loader for webpack which transforms files into base64 URIs. - // https://github.com/webpack-contrib/url-loader - { - loader: "file-loader", - options: { - name: "[name].[ext]", - publicPath: "../assets/img", - outputPath: "../assets/img" - } + test: /\.m?js$/, + exclude: /(node_modules)/, + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env'] } - ] + }, }, - // Apply plugins to svg assets. { - test: /\.(svg)$/i, + test: /\.(sa|sc|c)ss$/, use: [ - { - loader: "file-loader", - options: { - name: "[name].[ext]", - publicPath: "../assets/svg", - outputPath: "../assets/svg" - } - } - ] - }, + config.isProd ? { loader: MiniCssExtractPlugin.loader } : 'style-loader', + 'css-loader', + 'postcss-loader', + 'sass-loader' + ], + } ] }, - // Build optimizations. - optimization: { - // Uglify the Javascript & and CSS. - minimizer: [ - // Shrink JS. - new UglifyJsPlugin({ - cache: true, - parallel: true, - sourceMap: true - }), - // Shrink CSS. - new OptimizeCSSAssetsPlugin({}) - ], - }, - // Plugin configuration. plugins: [ - // Remove JS files from render. - new FixStyleOnlyEntriesPlugin(), - // Output css files. + new AssetsWebpackPlugin({path: config.distFolder}), new MiniCssExtractPlugin({ - filename: "../css/[name].css" - }), - // 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({ - onStart: { - delete: [distDir] - }, - onEnd: { - copy: [ - { - source: npmPackage + "/decanter/core/src/templates/**/*.twig", - destination: distDir + "/templates/decanter/" - }, - { - source: srcDir + "/assets/**/*", - destination: distDir + "/assets/" - } - ], - }, - }), - // Add a plugin to watch other files other than that required by webpack. - // https://www.npmjs.com/package/filewatcher-webpack-plugin - new ExtraWatchWebpackPlugin( { - files: [ - srcDir + '/**/*.twig', - srcDir + '/**/*.json' - ] + filename: '[name].css', }), - ] + ], + optimization: { + minimizer: [ + new OptimizeCSSAssetsPlugin(), + ] + } + }; -// Add the configuration. -module.exports = [ webpackConfig ]; +if (config.hmrEnabled) { + webpackConfig.plugins.push(new Webpack.HotModuleReplacementPlugin()); +} +module.exports = webpackConfig; \ No newline at end of file