wp-rdnyc/webpack.config.js

202 lines
4.5 KiB
JavaScript
Raw Normal View History

const path = require('path');
const glob = require("glob-all");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin");
const isProduction = 'production' === process.env.NODE_ENV;
// Set the build prefix.
let prefix = isProduction ? '.min' : '';
const config = {
2021-08-04 07:46:55 -04:00
performance: {
maxEntrypointSize: 320000,
maxAssetSize: 640000,
},
entry: './assets/js/main.js',
output: {
filename: `[name]${prefix}.js`,
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
"@babel/preset-env"
]
]
}
},
{
test: /\.[s]?css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
"postcss-loader",
],
},
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name][ext]'
},
},
{
test: /\.svg$/,
2021-07-25 09:29:15 -04:00
type: 'asset/resource',
generator: {
filename: (pathData) => {
2021-08-03 20:04:38 -04:00
if (pathData.filename.includes("bootstrap-icons")) {
2021-07-25 09:29:15 -04:00
return 'images/bsi-[name][ext]';
} else {
2021-07-25 09:29:15 -04:00
return 'images/svg-[name][ext]';
}
},
},
2021-07-25 09:29:15 -04:00
use: [
{
loader: 'svgo-loader',
options: {
configFile: path.resolve('svgo.config.js'),
}
}
],
},
]
},
optimization: {
minimizer: ["...", new CssMinimizerPlugin()],
},
mode: process.env.NODE_ENV,
resolve: {
alias: {
'@' : path.resolve('assets'),
'@images': path.resolve('../images')
}
},
plugins: [
new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
new CopyWebpackPlugin({
patterns: [{
from: './assets/images/',
to: 'images',
globOptions: {
ignore: [
'**/.DS_Store'
]
}
}]
}),
].concat(
isProduction
? [
new PurgecssPlugin({
paths: glob.sync([
'./*.php',
'./src/**/*.php',
'./page-templates/*.php',
'./content-templates/*.php',
]),
safelist: {
greedy: getCSSWhitelistPatterns(),
},
}),
]
: []
)
}
// Fire up a local server if requested
if (process.env.SERVER) {
config.plugins.push(
new BrowserSyncPlugin(
{
proxy: process.env.BSYNC_PROXY || 'localhost',
files: [
'**/*.php',
'**/*.scss'
],
port: process.env.BSYNC_PORT || 8080,
host: process.env.BSYNC_HOST || '127.0.0.1',
listen: process.env.BSYNC_LISTEN || '0.0.0.0',
notify: false,
open: false,
ui: { port: process.env.BSYNC_UI_PORT || 8081 }
}
)
)
}
/**
* List of RegExp patterns for PurgeCSS
* @returns {RegExp[]}
*/
function getCSSWhitelistPatterns() {
return [
/^home(-.*)?$/,
/^blog(-.*)?$/,
/^archive(-.*)?$/,
/^date(-.*)?$/,
/^error404(-.*)?$/,
/^admin-bar(-.*)?$/,
/^search(-.*)?$/,
/^nav(-.*)?$/,
/^wp(-.*)?$/,
/^has(-.*)?$/,
/^screen(-.*)?$/,
/^navigation(-.*)?$/,
/^(.*)-template(-.*)?$/,
/^(.*)?-?single(-.*)?$/,
/^postid-(.*)?$/,
/^post(-.*)?$/,
/^sticky(-.*)?$/,
/^attachmentid-(.*)?$/,
/^attachment(-.*)?$/,
/^page(-.*)?$/,
/^(post-type-)?archive(-.*)?$/,
/^author(-.*)?$/,
/^category(-.*)?$/,
/^tag(-.*)?$/,
/^menu(-.*)?$/,
/^more(-.*)?$/,
2021-08-03 16:06:07 -04:00
/^wpforms(-.*)?$/,
/^tags(-.*)?$/,
/^tax-(.*)?$/,
/^term-(.*)?$/,
/^date-(.*)?$/,
/^(.*)?-?paged(-.*)?$/,
/^depth(-.*)?$/,
/^children(-.*)?$/,
/^figure$/,
/^blockquote$/,
2021-08-03 20:04:38 -04:00
/^tsml(-.*)?$/,
/^collapse$/,
/^collapsing$/,
/^label$/,
/^input$/,
2021-08-03 16:06:07 -04:00
/^textarea$/,
/^select$/,
/^img$/,
/^ul$/,
/^li$/,
/^h.$/,
/^pre$/,
/^code$/,
2021-08-04 07:46:55 -04:00
/^fp-(.*)$/,
/^rpwwt-(.*)$/,
/^dropdown-(.*)$/,
];
}
module.exports = config