wp-73k/webpack.config.js

202 lines
4.9 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 SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin");
2021-07-04 08:27:31 -04:00
const isProduction = 'production' === process.env.NODE_ENV;
2019-05-23 12:30:31 -04:00
// Set the build prefix.
let prefix = isProduction ? '.min' : '';
const config = {
2021-07-04 18:16:33 -04:00
entry: './assets/js/main.js',
output: {
filename: `[name]${prefix}.js`,
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
2021-07-04 18:16:33 -04:00
loader: 'babel-loader',
options: {
presets: [
[
"@babel/preset-env"
]
]
}
},
{
test: /\.[s]?css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
"postcss-loader",
],
2021-07-04 18:16:33 -04:00
},
2021-07-04 08:27:31 -04:00
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "./fonts",
},
},
],
},
2021-07-04 09:26:44 -04:00
{
test: /\.svg$/,
loader: "svg-sprite-loader",
options: {
extract: true,
spriteFilename: "icon-sprites.svg",
2021-07-04 09:26:44 -04:00
publicPath: "./images/",
symbolId: (filePath) => {
if (filePath.includes("bootstrap-icons")) {
return `bi-${path.basename(filePath).slice(0, -4)}`;
} else if (filePath.includes("@mdi")) {
return `mdi-${path.basename(filePath).slice(0, -4)}`;
} else if (filePath.includes("heroicons")) {
if (filePath.includes("outline")) {
return `hio-${path.basename(filePath).slice(0, -4)}`;
} else {
return `his-${path.basename(filePath).slice(0, -4)}`;
}
} else {
return `${path.basename(filePath).slice(0, -4)}`;
}
},
},
},
2021-07-04 08:27:31 -04:00
]
2021-07-04 18:16:33 -04:00
},
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` }),
2021-07-04 09:26:44 -04:00
new SpriteLoaderPlugin({ plainSprite: true }),
2021-07-04 18:16:33 -04:00
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(),
},
}),
]
: []
)
2019-05-23 12:30:31 -04:00
}
// Fire up a local server if requested
if (process.env.SERVER) {
2021-07-04 18:16:33 -04:00
config.plugins.push(
new BrowserSyncPlugin(
{
proxy: process.env.BSYNC_PROXY || 'localhost',
2021-07-04 18:16:33 -04:00
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',
2021-07-04 18:16:33 -04:00
notify: false,
open: false,
ui: { port: process.env.BSYNC_UI_PORT || 8081 }
2021-07-04 18:16:33 -04:00
}
)
)
2019-05-23 12:30:31 -04:00
}
/**
* List of RegExp patterns for PurgeCSS
* @returns {RegExp[]}
*/
function getCSSWhitelistPatterns() {
2021-07-04 18:16:33 -04:00
return [
/^home(-.*)?$/,
/^blog(-.*)?$/,
/^archive(-.*)?$/,
/^date(-.*)?$/,
/^error404(-.*)?$/,
/^admin-bar(-.*)?$/,
/^search(-.*)?$/,
/^nav(-.*)?$/,
/^wp(-.*)?$/,
/^screen(-.*)?$/,
/^navigation(-.*)?$/,
/^(.*)-template(-.*)?$/,
/^(.*)?-?single(-.*)?$/,
/^postid-(.*)?$/,
/^post-(.*)?$/,
/^attachmentid-(.*)?$/,
/^attachment(-.*)?$/,
/^page(-.*)?$/,
/^(post-type-)?archive(-.*)?$/,
/^author(-.*)?$/,
/^category(-.*)?$/,
/^tag(-.*)?$/,
/^menu(-.*)?$/,
/^tags(-.*)?$/,
/^tax-(.*)?$/,
/^term-(.*)?$/,
/^date-(.*)?$/,
/^(.*)?-?paged(-.*)?$/,
/^depth(-.*)?$/,
/^children(-.*)?$/,
/^hljs(-.*)?$/,
/^tek(-.*)?$/,
/^html$/,
/^body$/,
/^blockquote$/,
2021-07-10 19:54:56 -04:00
/^input$/,
/^svg$/,
/^img$/,
/^ul$/,
2021-07-10 19:54:56 -04:00
/^li$/,
/^p$/,
/^a$/,
/^h.$/,
2021-07-10 19:54:56 -04:00
/^pre$/,
/^code$/,
2021-07-04 18:16:33 -04:00
];
2019-05-23 12:30:31 -04:00
}
module.exports = config