OZZlE
commented
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)
];
};
Steps to reproduce the issue
react-video.nunj
or video-config.yml
npm run build:fractal:
Reproduces how often:
100%
Reduced test case
Context