I did setup a local dev environment for developing Hubspot themes, and I do use Webpack 5 for bundling my javascript and processing Tailwind (S)CSS. There is ONE BIG problem though:
Every time I do save a file, while running npm run start (which is the watch script), it starts a new node process. So after a while my RAM usage is around 10GB. How could this happen? Clearly something is wrong inside my Webpack or the way I use the scripts.
package.json scripts Where I do use the NPM RUN START
"scripts": {
"js": "webpack --mode=production --config=webpack.prod.js",
"watch:js": "webpack --mode=development --config=webpack.dev.js --progress",
"scss": "sass --no-source-map --load-path=src/css/abstracts src/modules:src/modules",
"watch:scss": "sass --no-source-map --load-path=src/css/abstracts src/modules:src/modules --watch",
"watch:tailwind": "tailwind -i --watch --config tailwind.config.js",
"watch:hubspot": "npx hs watch ./src $npm_package_config_portalFolder",
"build": "run-p scss && run-p js",
"start": "concurrently \"npm run watch:js\" \"npm run watch:hubspot\"",
"upload": "npm run build && npx hs upload ./src $npm_package_config_portalFolder",
"prepare": "husky install"
},
webpack.common.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: path.join(__dirname, 'js-modules', 'scripts.js'),
output: {
path: path.resolve(__dirname, 'src/js'),
filename: 'scripts.js',
},
plugins: [
new MiniCssExtractPlugin({
filename: '../css/styles.css',
}),
],
}
webpack.dev.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const stylesHandler = MiniCssExtractPlugin.loader
const WebpackShellPluginNext = require('webpack-shell-plugin-next')
module.exports = merge(common, {
mode: 'development',
devtool: 'source-map',
watch: true,
plugins: [
new WebpackShellPluginNext({
onDoneWatch: {
scripts: [
'sass --no-source-map --load-path=src/css/abstracts src/modules:src/modules src/css/templates:src/css/templates --watch',
],
blocking: false,
parallel: true,
},
onBuildEnd: {
scripts: ['echo "SASS is working2"'],
blocking: false,
parallel: false,
},
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
type: 'javascript/auto',
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.scss$/,
use: [
stylesHandler,
{ loader: 'css-loader', options: { sourceMap: true, importLoaders: 2 } },
{
loader: 'postcss-loader',
options: {
postcssOptions: {
map: true,
plugins: [
require('postcss-import'),
require('tailwindcss')({ config: './tailwind.config.js' }),
require('postcss-nested'),
],
},
sourceMap: true,
},
},
{ loader: 'sass-loader' },
],
},
],
},
})