Webpack 5 starts a new node process everytime I save a file

Viewed 17

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' },
        ],
      },
    ],
  },
})
0 Answers
Related