Met a problem, that I try solve for 3 days already. When I try to build my project (Node.JS(21), Vue3, Quasar) with Webpack 5 on local machine (32 GB of RAM) and it builds without problem (uses 12Gb of RAM) But whene I try to build it on server working under docker. There are 216 GB of RAM. But in some moment I got the error
[ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory
Old version of project (with Node.JS(16), Vue2, no Quasar) build under Webpack 4 without problems.
webpack.config.js:
const path = require('path');
const glob = require('glob');
const fs = require('fs');
const basicPath = 'resources/js/pages/';
const distPath = path.join(__dirname, '/public');
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack')
const releaseVersion = () => {
const releaseFile = 'version.json'
const jsonFile = fs.readFileSync(releaseFile, 'utf8');
const json = JSON.parse(jsonFile )
const hash = json.hash
return hash
}
const getFileName = (files) => {
let obj = {}
files.forEach(async (el) => {
let fileName = el.split(basicPath)
obj[fileName[1]] = el
})
return obj
}
const entries = () => {
const jsFiles = glob.sync('./resources/js/pages/*.js*')
const langFiles = glob.sync('./resources/js/pages/lang/*.js*')
const sharedFiles = glob.sync('./resources/js/pages/shared/*.js*')
const js = getFileName(jsFiles)
const lang = getFileName(langFiles)
const shared = getFileName(sharedFiles)
const entries = Object.assign(
js,
lang,
shared
);
return entries
}
const config = {
devtool: 'source-map',
mode: '',
entry: entries,
cache: false,
output: {
filename: '[name]',
chunkFilename: `[id].js?v${releaseVersion()}`,
path: distPath + '/js',
publicPath: "/CRM/js/"
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
exclude: /(node_modules|lang)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
"sass-loader",
],
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
]
},
plugins: [
new VueLoaderPlugin(),
new webpack.EnvironmentPlugin(['npm_package_version']),
],
resolve: {
modules: ["node_modules"],
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
},
extensions: ['.vue', '.js']
},
performance: {
hints: false
}
}
module.exports = (env, argv) => {
if (argv.mode === 'production') {
config.mode = 'production';
config.devtool = false
} else {
config.mode = 'development';
config.devtool = false
}
return config;
};
I tried using –max-old-space-size=16384, but there was no any result
I can’t downgrade to Webpack 4 because Vue3 are not compatible with this version of webpack
Maksut Savin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.