Skip to content

Commit

Permalink
D8CORE-6895: updates for new Decanter and updating webpack
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenbreese
jenbreese committed Sep 12, 2023
1 parent b689c81 commit f270352
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 258 deletions.
2 changes: 1 addition & 1 deletion themes/stanford_basic/.nvmrc
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
14.8.0
18
58 changes: 19 additions & 39 deletions themes/stanford_basic/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 9 additions & 0 deletions themes/stanford_basic/src/config.js
View file
Original file line number Diff line number Diff line change
@@ -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,
};
267 changes: 49 additions & 218 deletions themes/stanford_basic/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit f270352

Please sign in to comment.