CLI upload main.js file size limited when building with react and threejs

Developer Support CMS Development
5

Hi,

I had the same issue, so I made improvements to the Webpack config files. Created one for dev and one for production. Got the file size down to 500kt. I’m using the built npm library, so the boilerplate build must add a lot of extra stuff there. The configs in the HS boilerplate repo is not optimized well. Added also local development environment, so you don’t have to push to HS all the time, instead develop local and in the end push to HS. This is a Typescript example.

in package.json

"start": "webpack serve --open --config webpack.dev.js", // local
"start-hs": "webpack --watch --env autoupload --config webpack.prod.js" // HS

webpack.common.js

const path = require('path');

module.exports = {
 entry: {
 main: './src/index.js',
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 },
 },
 {
 test: /\.tsx?$/,
 use: 'ts-loader',
 exclude: /node_modules/,
 },
 {
 test: /\.(png|svg|jpg|jpeg|gif)$/i,
 type: 'asset/resource',
 },
 ],
 },
 resolve: {
 extensions: ['.tsx', '.ts', '.js'],
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 clean: true,
 publicPath: '/',
 },
};

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = merge(common, {
 mode: 'development',
 target: 'web',
 // devtool: 'inline-source-map',
 devServer: {
 contentBase: path.join(__dirname, 'dist'),
 writeToDisk: true,
 },
 plugins: [
 new webpack.ProvidePlugin({
 process: 'process/browser',
 }),
 new CopyWebpackPlugin([{ from: 'src/images', to: 'images' }]),
 new HtmlWebpackPlugin({
 title: 'Dev',
 template: path.resolve(__dirname, 'src/public/index.html'),
 inject: true,
 }),
 ],
});

webpack.prod.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const HubSpotAutoUploadPlugin = require('@hubspot/webpack-cms-plugins/HubSpotAutoUploadPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const webpack = require('webpack');

const hubspotConfig = ({ portal, autoupload } = {}) => {
 return merge(common, {
 mode: 'production',
 plugins: [
 new webpack.ProvidePlugin({
 process: 'process/browser',
 }),
 new MiniCssExtractPlugin({
 filename: '[name].css',
 }),
 new HubSpotAutoUploadPlugin({
 portal,
 autoupload,
 src: 'dist',
 dest: 'avidly-react-app',
 }),
 new CopyWebpackPlugin([
 { from: 'src/images', to: 'images' },
 {
 from: 'src/modules',
 to: 'modules',
 },
 ]),
 ],
 });
};

module.exports = [hubspotConfig];

Hopefully helps!

Cheers, JJ