Open OZZlE opened 1 month ago
webpack.config:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
/*eslint-disable */
var dirname = __dirname;
/*eslint-enable */
const getBabelOptions = (targets, useBuiltIns = 'entry') => {
let plugins = [
["@babel/plugin-proposal-decorators", { "legacy": true }],
];
if (!targets.esmodules) {
plugins.push(["@babel/plugin-proposal-class-properties", { loose: true }]);
plugins.push(["@babel/plugin-proposal-private-methods", { loose: true }]);
}
return {
"presets": [
[
"@babel/preset-env",
{
"targets": targets,
/*
"corejs": {
version : "2",
proposals : true,
},
modules: false,
*/
//"useBuiltIns": useBuiltIns,
}
],
"@babel/preset-react"
],
"plugins": plugins,
};
};
const resolve = {
modules: [
path.resolve(dirname, 'components/atoms/'),
path.resolve(dirname, 'components/molecules/'),
path.resolve(dirname, 'components/organisms/'),
path.resolve(dirname, 'static/scripts'),
path.resolve(dirname, 'static/styles'),
path.resolve(dirname, 'static'),
path.resolve(dirname, 'node_modules/foundation-sites/scss'),
'node_modules',
],
extensions: ['.js', '.jsx'],
// alias: {
// icons: path.resolve(dirname, 'static/icons'),
// }
};
const output = {
path: path.resolve(dirname, 'dist'),
publicPath: '/',
};
const eslintRule = {
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
configFile: '.eslintrc.js',
},
};
const getScssRule = (env) => {
return {
test: /\.scss$/,
use: [
{
loader:
env === 'production'
? MiniCssExtractPlugin.loader
: 'style-loader',
},
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
/* eslint-disable global-require */
require('postcss-focus')(),
require('autoprefixer')({ grid: true }),
require('cssnano')(),
/* eslint-enable global-require */
],
},
},
},
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: ['node_modules'],
}
},
},
],
}
};
const fileRule = {
test: /\.(svg|png|jpe?g|gif|woff|woff2|eot|ttf|otf|mp4)$/,
// exclude: [
// path.resolve('./static/icons/**/*'),
// path.resolve('./static/fonts/icons.svg'),
// ],
exclude: path.resolve('./static/icons'),
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'static/fonts/',
},
},
],
};
const svgSpriteRule = {
test: /\.svg$/,
include: path.resolve('./static/icons'),
use: [
{
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'static/images/icons.svg',
esModule: false,
},
},
'svgo-loader',
],
};
const getPlugins = (apiEnvTarget, env = 'production') => {
const plugins = [
new StyleLintPlugin({
configFile: './.stylelintrc',
}),
new MiniCssExtractPlugin({
filename: './static/styles/[name].css',
}),
new SpriteLoaderPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
foundation: 'Foundation'
}),
// this is used to import environment specific modules like api request etc, ie api will be mocked in development
new webpack.NormalModuleReplacementPlugin(/(.*)-ENVIRONMENT_TARGET(\.*)/, function (resource) {
resource.request = resource.request.replace(/-ENVIRONMENT_TARGET/, `-${apiEnvTarget}`);
})
];
if (env === 'production') {
plugins.push(new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}));
}
return plugins;
}
const devServer = {
historyApiFallback: true,
compress: true,
proxy: {
'**': 'http://localhost:4000',
},
// port: 3000,
client: {
overlay: true,
},
devMiddleware: {
stats: {
colors: true,
},
},
};
const optimization = {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
};
const legacyTargets = {
"browsers": [
">0.25%",
"IE 11"
]
};
const getApiTargetEnv = (origEnv) => {
// Azure Styleguide used 'development' with hardcoded responses see api-development
// No longer maintained though..
return 'production'; // origEnv.epi ? 'development' : 'production';
}
const legacyUseBuiltIns = 'entry';
const legacyConfig = (origEnv, argv) => {
var apiEnvTarget = getApiTargetEnv(origEnv);
var env = origEnv.epi ? 'development' : 'production';
return {
mode: env,
// devtool: 'source-map',
resolve,
entry: {
react: [
'babel-polyfill',
path.resolve(dirname, 'static/scripts/polyfills.js'),
// was main
path.resolve(dirname, 'static/scripts/main.js'),
// path.resolve(dirname, 'static/styles/main.scss'),
path.resolve(dirname, 'static/scripts/react-bundle.js')
],
},
output: {
path: output.path,
publicPath: output.publicPath,
filename: env === 'production' ? './static/scripts/[name].ver.[chunkhash].js' : './static/scripts/[name].js',
},
module: {
rules: [
eslintRule,
{
test: /\.(js|jsx)$/,
exclude: /node_modules\/(?![foundation-sites])/,
loader: 'babel-loader',
options: getBabelOptions(legacyTargets, legacyUseBuiltIns)
},
getScssRule(env),
fileRule,
svgSpriteRule,
],
},
plugins: getPlugins(apiEnvTarget, env),
devServer,
optimization,
};
}
const modernTargets = { "esmodules": true };
const modernUseBuiltIns = 'usage';
const moduleConfig = (origEnv, argv) => {
var apiEnvTarget = getApiTargetEnv(origEnv);
var env = origEnv.epi ? 'development' : 'production';
return {
mode: env,
// devtool: 'source-map',
resolve,
entry: {
main: [
path.resolve(dirname, 'static/styles/main.scss')
],
react: [
// was main
path.resolve(dirname, 'static/scripts/main.js'),
// path.resolve(dirname, 'static/styles/main.scss'),
path.resolve(dirname, 'static/scripts/react-bundle.js')
],
},
output: {
path: output.path,
publicPath: output.publicPath,
filename: env === 'production' ? './static/scripts/[name].module.ver.[chunkhash].js' : './static/scripts/[name].module.js',
},
module: {
rules: [
eslintRule,
{
test: /\.(js|jsx)$/,
exclude: /node_modules\/(?![foundation-sites])/,
loader: 'babel-loader',
options: getBabelOptions(modernTargets, modernUseBuiltIns)
},
getScssRule(env),
fileRule,
svgSpriteRule,
],
},
plugins: getPlugins(apiEnvTarget, env),
devServer,
optimization,
};
}
module.exports = function config(env, argv = {}) {
if (env.styleguide) {
return moduleConfig({
...env,
epi: true,
}, argv);
}
return [
legacyConfig(env, argv), moduleConfig(env, argv)
];
};
Github action:
name: test-styleguide-build
on:
workflow_dispatch:
inputs: {}
pull_request:
types:
- opened
- reopened
- synchronize
jobs:
build:
env:
runner_memoryrequest: 12000Mi
runner_memorylimit: 12000Mi
runs-on: windows-latest
strategy:
matrix:
node-version: [20.14.0]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
working-directory: Mycard.FE
- run: npm run build:fractal
working-directory: Mycard.FE
package.json:
{
"name": "censored-styleguide",
"version": "0.0.1",
"description": "censored styleguide based on Fractal using node 8.16.0",
"fractal": {
"main": "fractal.jss"
},
"repository": {
"type": "git",
"url": "https://github.com/censoredgroup/sk-opwenweb-censoredxx.git"
},
"private": true,
"scripts": {
"build-epi": "npm run webpack:local:epi",
"build-epi-JS-only": "npm run lint:changed:js-win && webpack --env=epi && npm run copy:local:winscripts",
"build-epi-CSS-only": "npm run lint:changed:scss-win && npm run webpack:prd:styles && npm run copy:winstyles",
"run:fractal": "node ./server.js",
"run:webpack": "webpack-dev-server --env=styleguide",
"webpack:dev": "webpack --env=styleguide",
"build:fractal": "fractal build",
"webpack:prd": "npm run clean:script && webpack --env=production && npm run copy:win",
"webpack:local:epi": "npm run lint-changed-win && webpack --env=epi && npm run webpack:prd:styles && npm run copy:local:win",
"webpack:prod:epi": "webpack --env=production && npm run copy:win",
"webpack:prd:styles": "webpack --env=production --config webpack.styles-only.config.js",
"webpack:local:styles:build": "webpack --env=development --config webpack.styles-only.config.js",
"start": "npm-run-all --parallel run:fractal run:webpack",
"build": "npm-run-all --parallel webpack:prd build:fractal",
"build:styles": "npm-run-all --parallel webpack:prd webpack:prd:styles",
"copy": "node ./node_modules/cpx/bin/index.js -v './dist/static/**/*' ../censored.XX.BE/Static/",
"copy:win": "node ./node_modules/cpx/bin/index.js -v ./dist/static/**/* ../censored.XX.BE/Static/ && npm run copy:versioned:main:script",
"copy:local:win": "node ./node_modules/cpx/bin/index.js -v ./dist/static/**/* ../censored.XX.BE/Static/",
"copy:winstyles": "node ./node_modules/cpx/bin/index.js -v ./dist/static/**/*.css ../censored.XX.BE/Static/",
"copy:versioned:main:script": "node copy-main.js",
"clean:script": "node clean.js",
"copy:winscripts": "node ./node_modules/cpx/bin/index.js -v ./dist/static/scripts/* ../censored.XX.BE/Static/scripts/ && npm run copy:versioned:main:script",
"copy:local:winscripts": "node ./node_modules/cpx/bin/index.js -v ./dist/static/scripts/* ../censored.XX.BE/Static/scripts/",
"gen:bundle:stats": "webpack --env=development --config webpack.bundle-analyzer.config.js --profile --json=./dist/stats.json",
"show:bundleanalyzer": "webpack-bundle-analyzer ./dist/stats.json",
"test": "jest --passWithNoTests",
"test:watch": "jest --watch",
"lint:js": "node node_modules/eslint/bin/eslint.js components/**/*.js static/scripts/*.js static/scripts/api/**/*.jsx static/scripts/helpers/**/*.js",
"lint:changed:js-win": "node cli-scripts/win-lint-changed-js.js",
"lint:scss": "node node_modules/stylelint/bin/stylelint.js **/*.scss",
"lint:changed:scss-win": "node cli-scripts/win-lint-changed-scss.js",
"lint": "npm run lint:js && npm run lint:scss",
"lint-changed-win": "npm run lint:changed:js-win && npm run lint:changed:scss-win"
},
"lint-staged": {
"linters": {
"*.scss": [
"stylelint scss",
"git add"
],
"*.js": [
"eslint --fix",
"git add"
]
},
"ignore": [
"**/dist/**/*.{js,json,css,md}"
]
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-transform-runtime": "^7.19.6",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@frctl/fractal": "^1.5.14",
"@frctl/nunjucks": "^1.0.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"autoprefixer": "^10.4.13",
"babel-eslint": "^10.1.0",
"babel-loader": "^9.1.0",
"cpx": "^1.5.0",
"css-loader": "^6.7.2",
"css-mediaquery": "^0.1.2",
"cssnano": "^5.1.14",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-react": "^7.31.11",
"file-loader": "^6.2.0",
"husky": "^8.0.2",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"lint-staged": "^13.1.0",
"mini-css-extract-plugin": "^2.7.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.31",
"postcss-cli": "^10.1.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-focus": "^5.0.1",
"postcss-loader": "^7.0.2",
"prettier": "^2.8.1",
"script-loader": "^0.7.2",
"style-loader": "^3.3.1",
"stylelint": "^14.16.0",
"stylelint-config-recommended-scss": "^8.0.0",
"stylelint-scss": "^4.3.0",
"stylelint-webpack-plugin": "^3.3.0",
"svg-sprite-loader": "^6.0.11",
"svgo": "^3.0.2",
"svgo-loader": "^3.0.3",
"webpack": "^5.76.0",
"webpack-bundle-analyzer": "^4.7.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
},
"engines": {
"node": ">=16"
},
"dependencies": {
"@babel/plugin-proposal-decorators": "^7.20.5",
"animate.css": "^4.1.1",
"babel-polyfill": "^6.26.0",
"body-scroll-lock": "^4.0.0-beta.0",
"focus-trap": "^7.2.0",
"foundation-sites": "^6.7.5",
"iframe-resizer": "^4.3.2",
"jquery": "^3.6.2",
"jquery-modal": "^0.9.2",
"jquery.scrollto": "^2.1.3",
"js-cookie": "^3.0.1",
"mobx": "^6.7.0",
"mobx-react": "^7.6.0",
"picturefill": "^3.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal": "^3.16.1",
"react-responsive": "^9.0.2",
"sanitize.css": "^13.0.0",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
"scrollprogress": "^3.0.2",
"slick-carousel": "^1.8.1",
"stickyfilljs": "^2.1.0",
"svgxuse": "^1.2.6",
"universal-cookie": "^4.0.4",
"whatwg-fetch": "^3.6.2"
}
}
I tried updating to latest Fractal modules but this build fails in the same way then also
Steps to reproduce the issue
react-video.nunj
or video-config.yml
npm run build:fractal:
Reproduces how often:
100%
Reduced test case
Context