Related
I'm working on cleaning up an older React project and trying to cut down on bundle size by implementing code splitting and chunking things out. I've made considerable progress, but my main entry point for the application is still sitting at ~600kb. It seems to be 95% coming from not the application code itself but the css-loader library I'm using during the webpack build process.
This seems incorrect, but I can't figure out what about my webpack config or packages is causing this bloat in this particular bundle.
Here's my environment-common and production webpack config info:
// webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');
module.exports = {
entry: ['babel-polyfill', `${SRC_DIR}/index.js`],
output: {
path: BUILD_DIR,
publicPath: '/',
filename: '[name].[fullhash].bundle.js',
chunkFilename: '[name].[chunkhash].bundle.js'
},
optimization: {
moduleIds: 'named',
splitChunks: {
chunks: 'all'
}
},
module: {
// exclude node_modules
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(scss|css)$/,
use: [
process.env.NODE_ENV !== 'production'
? 'style-loader'
: MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
},
resolve: {
alias: {
'~': path.resolve(__dirname, 'src')
},
extensions: ['*', '.js']
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: './public/index.html'
}),
new CopyWebpackPlugin({
patterns: [
{ from: './public/img', to: 'img' },
{ from: './web.config', to: 'web.config' }
]
})
]
};
// webpack.prod.js
const { merge } = require('webpack-merge');
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.common');
const config = require('./config/config.prod.json');
const extractCSS = new MiniCssExtractPlugin({ filename: '[name].fonts.css' });
const extractSCSS = new MiniCssExtractPlugin({ filename: '[name].styles.css' });
process.traceDeprecation = true;
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
API_BASE_URL: JSON.stringify(config.API_BASE_URL),
TUMBLR_CLIENT_BASE_URL: JSON.stringify(config.TUMBLR_CLIENT_BASE_URL)
}),
extractCSS,
extractSCSS,
new CompressionPlugin()
],
optimization: {
splitChunks: {
chunks: 'all'
},
minimize: true
}
});
// package.json
{
"name": "***",
"version": "1.0.0",
"description": "***",
"author": "***",
"url": "***",
"copyright": "***",
"license": "GPL",
"private": true,
"homepage": "***",
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/eslint-parser": "^7.13.8",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.13.8",
"#babel/plugin-transform-runtime": "^7.4.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^9.1.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"codecov": "^3.1.0",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^5.2.0",
"css-loader": "^6.7.2",
"eslint": "^8.28.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.1.0",
"eslint-import-resolver-webpack": "^0.13.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest-dom": "^3.9.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-testing-library": "^5.9.1",
"eslint-watch": "^8.0.0",
"html-webpack-plugin": "^5.5.0",
"jest": "^26.6.3",
"jest-dom": "^4.0.0",
"jest-when": "^2.3.1",
"mini-css-extract-plugin": "^2.7.0",
"mkdirp": "^0.5.1",
"msw": "^0.35.0",
"node-sass": "^8.0.0",
"prettier": "^2.0.2",
"redux-saga-test-plan": "^3.7.0",
"redux-test-utils": "^0.3.0",
"rimraf": "^2.6.2",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.6",
"unused-webpack-plugin": "^2.4.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"availity-reactstrap-validation": "npm:availity-reactstrap-validation-safe#^2.6.1",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.1.3",
"chalk": "^2.4.1",
"classnames": "^2.2.6",
"dot-prop-immutable": "^1.5.0",
"history": "^4.7.2",
"immutable": "^4.0.0-rc.12",
"jquery": "^3.5.1",
"local-storage": "^1.4.2",
"lodash": "^4.17.20",
"luxon": "^3.1.1",
"promise": "^8.0.2",
"prop-types": "^15.6.2",
"query-string": "^6.2.0",
"rc-tooltip": "^3.7.3",
"react": "^16.8.6",
"react-autosuggest": "^9.4.3",
"react-dom": "^16.8.6",
"react-ga": "^2.5.6",
"react-multivalue-text-input": "^0.6.2",
"react-query": "^3.26.0",
"react-redux": "^5.1.1",
"react-redux-toastr": "^7.4.3",
"react-router": "^6.2.1",
"react-router-dom": "^5.2.0",
"react-table": "^7.6.3",
"react-toastify": "^7.0.3",
"react-transition-group": "^2.5.0",
"reactstrap": "^6.5.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.2",
"reselect": "^4.0.0",
"simple-line-icons": "^2.4.1",
"styled-components": "^4.1.2",
"uuid": "^8.3.2"
},
"scripts": {
"start": "webpack serve --config webpack.dev.js",
"build": "npm run clean && webpack --config webpack.prod.js",
"build:staging": "npm run clean && webpack --config webpack.staging.js",
"clean": "rimraf ./build",
"lint": "prettier --write \"src/**/*.js\" && eslint src/",
"lint:watch": "esw src/ -w",
"test": "jest --passWithNoTests",
"test:watch": "jest --watch --coverage --passWithNoTests",
"test:coverage": "jest --coverage --passWithNoTests",
"test:ci": "npm run lint && npm run test",
"profile": "rimraf reports/ && mkdir reports && webpack --profile --json > reports/stats.json --config webpack.prod.js"
},
"engines": {
"node": ">= 8.9.1",
"npm": ">= 5.6.0"
},
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "<rootDir>/config/tests/styleMock.js",
"^~/(.*)": "<rootDir>/src/$1"
},
"globals": {
"API_BASE_URL": "http://baseurl/"
},
"setupFilesAfterEnv": [
"<rootDir>/config/tests/setup.js"
]
},
"browserslist": [
"> 0.25%",
"not dead"
]
}
Is there a reason that css-loader alone is being bundled into the main bundle? And how do I either make it stop or resize it to a manageable level?
Be aware, running the production mode webpack build and having NODE_ENV set to production is two different thing! And without setting it, NODE_ENV ended up undefined, so style-loader was used for every build.
You have to do an export NODE_ENV=production; before running your build with your current code.
Alternatively you can create your webpack config like this:
module.exports = (env, argv) => {
if (argv.mode === 'development') {
}
if (argv.mode === 'production') {
}
return config;
};
This way you can manage it from cli simply by passing --mode=production or --mode=development and instead of env variables you can rely on webpack's configuration.
I recently joined a company that works with react (classes) and typescript, I was flabbergasted when I knew that the react they are using does not hot/live reload on changes (CSS, state, or any change), what happens on changes is webpack recompiles (takes around 25 seconds) and to see changes I should reload the page which is slowing down the development experience greatly.
Talking to the manager it was decided that we do a migration to a new create react app gradually as there is lots of code and redundancy and we want to use functional react hooks (which will take years maybe as the app is big) but until then I want to resolve the hot reload issue.
I believe the react app a long time ago was not started with creat-react-app or something.
Just to mention I have 1.5 yrs experience in the industry so config stuff is still new to me and am just doing this for my learning benefits and to improve the team experience, it's not really an assigned task to do.
Below are our package.json, webpack file, and index file. Please let me know if you need to see anything else.
Package.json:
{
"name": "web-front-end",
"version": "1.22.19",
"description": "HTML5 implementation of the <our company name>. Written in Typescript, compiled to JavaScript, bundled with Webpack, executing on NodeJS, using React, adopting FLUX patterns.",
"private": true,
"scripts": {
"babel": "babel built/client/js/client.js -o built/client/js/client.js",
"clean": "rm -rf node_modules && rm -rf built && rm -rf coverage && echo 'clean complete'",
"reset": "yarn clean && yarn cache clean && yarn install --frozen-lockfile",
"compile": "yarn compile-client && yarn compile-server && yarn babel",
"debug-client": "NODE_ENV=debug webpack --config webpack.dev.js && echo 'client compile complete'",
"compile-client": "NODE_ENV=production webpack --config webpack.prod.js && echo 'production client compile complete'",
"compile-client-dev": "NODE_ENV=development webpack --config webpack.dev.js && echo 'development client compile complete'",
"compile-client-dev-watch": "NODE_ENV=development webpack --config webpack.dev-watch.js",
"compile-server": "tsc -p src/server && echo 'server compile complete'",
"compile-client-watch": "NODE_ENV=development webpack --config webpack.dev-watch.js",
"compile-server-watch": "tsc -p src/server --watch",
"validate": "yarn --ignore-engines && tslint './src/**/*.{ts,tsx}' './test/**/*.{ts,tsx}' && echo 'validate complete'",
"start-server": "node ./built/server/ServerApp.js",
"test": "tslint --project test && tslint --project src/app && tsc -p test --jsx react && node ./node_modules/jest/bin/jest.js --config=jest.test.config.json --coverage --verbose",
"lint-fix": "tslint --fix --project src && tslint --fix --project test",
"prepare": "patch-package"
},
"dependencies": {
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.8.4",
"#mui/styles": "^5.8.4",
"#stripe/stripe-js": "1.11.0",
"assert": "^2.0.0",
"axios": "^0.27.2",
"blob-stream": "0.1.3",
"buffer": "^6.0.3",
"compression": "1.7.3",
"compression-webpack-plugin": "^10.0.0",
"connected-react-router": "^6.9.2",
"cors": "2.8.4",
"device-uuid": "1.0.4",
"dotenv": "6.0.0",
"express": "4.16.3",
"file-saver": "^2.0.5",
"html-to-image": "^1.10.8",
"https-browserify": "^1.0.0",
"js-cookie": "2.2.0",
"node-zip": "1.1.1",
"path-to-regexp": "2.4.0",
"pug": "2.0.3",
"query-string": "6.1.0",
"react": "17.0.0",
"react-copy-to-clipboard": "5.0.1",
"react-dom": "^17.0.2",
"react-form-validator-core": "0.4.4",
"react-hook-form": "^7.36.0",
"react-inlinesvg": "2.3.0",
"react-jss": "8.5.1",
"react-lazy-load": "3.0.13",
"react-markdown": "4.0.4",
"react-material-ui-form-validator": "^3.0.1",
"react-player": "1.14.2",
"react-redux": "^7.2.6",
"react-router": "5.2.1",
"react-router-dom": "5.3.0",
"react-share": "2.4.0",
"react-speech-recognition": "^3.10.0",
"react-stripe-elements": "2.0.1",
"react-svgmt": "^1.2.0",
"react-virtualized": "9.22.3",
"react-youtube": "7.9.0",
"recompose": "0.27.1",
"rect": "1.2.1",
"redux": "4.0.0",
"redux-thunk": "2.3.0",
"regenerator-runtime": "^0.13.9",
"shortid": "2.2.15",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"svg-to-pdfkit": "0.1.7",
"url": "^0.11.0",
"utf8": "3.0.0"
},
"devDependencies": {
"#babel/cli": "^7.17.6",
"#babel/core": "^7.17.8",
"#babel/types": "^7.17.0",
"#types/blob-stream": "0.1.29",
"#types/code": "4.0.4",
"#types/detect-browser": "3.0.0",
"#types/jest": "25.2.3",
"#types/js-cookie": "2.2.1",
"#types/lab": "11.1.0",
"#types/react": "17.0.14",
"#types/react-dom": "17.0.14",
"#types/react-inlinesvg": "1.0.0",
"#types/react-redux": "^7.1.20",
"#types/react-router": "4.4.5",
"#types/react-virtualized": "9.21.18",
"#types/shortid": "0.0.29",
"#types/utf8": "2.1.6",
"awesome-typescript-loader": "3.4.1",
"copy-webpack-plugin": "4.5.1",
"detect-browser": "3.0.1",
"fork-ts-checker-webpack-plugin": "^7.2.13",
"jest": "^27.5.1",
"patch-package": "6.1.2",
"postinstall-postinstall": "2.0.0",
"process": "^0.11.10",
"source-map-loader": "0.2.3",
"source-map-support": "0.4.18",
"ts-jest": "27.1.2",
"ts-loader": "^9.3.1",
"ts-mockito": "2.3.0",
"ts-node": "^10.8.1",
"tslint": "^6.0.1",
"tslint-eslint-rules": "5.4.0",
"tslint-react": "^5.0.0",
"typescript": "4.1.5",
"webpack": "^5.73.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^4.10.0",
"webpack-merge": "^5.8.0"
},
"resolutions": {
"#types/prop-types": "15.7.5",
"#types/unist": "2.0.0",
"#types/react-transition-group": "2.0.8",
"#types/react": "17.0.14",
"#types/react-dom": "17.0.14"
},
"repository": {
"type": "git",
"url": "our repo link"
},
"author": "our company name",
"license": "MIT",
}
Webpack.common.js:
const path = require("path");
const webpack = require('webpack');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = {
entry: "./src/app/Main.ts",
cache: false,
optimization: {
providedExports: true,
usedExports: true,
removeAvailableModules: true,
removeEmptyChunks: true,
mergeDuplicateChunks: true,
chunkIds: 'named',
},
plugins: [
new webpack.ProvidePlugin({process: "process/browser"}),
new ForkTsCheckerWebpackPlugin(
{
typescript: {
configFile: './src/app/tsconfig.json'
}
}),
],
module: {
rules: [
{
test: /\.tsx?$/i,
loader: "ts-loader",
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
generator: {
filename: 'assets/[hash][ext]',
},
},
],
},
resolve: {
alias: {
core: path.join(__dirname, "src", "core"),
client: path.join(__dirname, "src", "client"),
server: path.join(__dirname, "src", "server"),
'<our company name>-typescript-common': path.resolve(__dirname, 'node_modules/<our company name>-typescript-common/'),
},
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".jsx"],
fallback: {
"util": require.resolve('util'),
"os": false,
"fs": false,
"path": false,
"zlib": false,
"buffer": require.resolve('buffer'),
"http": require.resolve('stream-http'),
"https": require.resolve('https-browserify'),
"url": require.resolve('url'),
"stream": require.resolve('stream-browserify'),
},
},
output: {
path: path.resolve(__dirname, "built"),
filename: "client/js/client.js",
clean: true,
},
};
index.js (called Main.ts on our codebase)
import { render } from 'react-dom';
import { AppWrapper } from './view/App/AppWrapper';
declare var window: any;
class CompanyName {
constructor() {
window.dataLayer = window.dataLayer || [];
window._hsq = window._hsq || [];
const rootHtmlElement = document.body.appendChild(document.createElement('div'));
render(new AppWrapper({
lang: window.appConfig.LANGUAGE,
appConfig: window.appConfig,
startupTimestamp: window.sts}).render(), rootHtmlElement);
}
}
// tslint:disable-next-line:no-unused-expression
new CompanyName();
webpack.dev-watch.js:
const { merge } = require("webpack-merge");
const common = require("./webpack.dev.js");
const path = require('path');
module.exports = merge(common, {
watch: true,
optimization: {
minimize: false,
mangleExports: false,
mangleWasmImports: false
},
watchOptions: {
ignored: [
path.posix.resolve(__dirname, './node_modules'),
path.posix.resolve(__dirname, './rfg'),
path.posix.resolve(__dirname, './patches'),
path.posix.resolve(__dirname, './built'),
],
poll: 1500,
aggregateTimeout: 1000,
},
});
I would be grateful if you provide any explanations, explanatory links or videos in your answers so I can learn more.
Thanks.
I have a custom hook and it works great! However, I'm getting Typescript errors if I simply use React.useState and React.useEffect. To fix this, I import in React and use (React as any).useState and (React as any).useEffect and then I get the following error that doesn't let me compile.
Hook:
import * as React from 'react';
import imageApi from 'xcel-api-generator/dist/image';
export const useUserProfileImage = (size, userProfileImage) => {
const [userImage, setUserImage] = (React as any).useState(null);
(React as any).useEffect(() => {
const runEffect = async () => {
const userImageCall = await imageApi.getTypeByImageType( {"imageType": size} )
setUserImage(userImageCall.url);
};
runEffect();
}, [userProfileImage])
return [userImage]
}
Error:
../rsv8-components/src/hooks/userProfileImage.ts 5:43
Module parse failed: Unexpected token (5:43)
You may need an appropriate loader to handle this file type.
|
| export const useUserProfileImage = (size, userProfileImage) => {
> const [userImage, setUserImage] = (React as any).useState(null);
| (React as any).useEffect(() => {
| const runEffect = async () => {
I'm totally clueless when it comes to webpack/babel etc... Could someone help guide me through this! Thanks!
Here is my local package.json file:
{
"name": "rsv8-components",
"version": "0.3.11",
"main": "./dist/module.js",
"types": "./dist/module.d.ts",
"dependencies": {
"#types/react-avatar-editor": "^10.3.5",
"react-avatar-editor": "^12.0.0-beta.0",
"react-scroll-to": "^1.2.2",
"react-slick": "^0.23.1",
"react-slick-deux": "https://github.com/aboorde/react-slick-deux#master",
"slick-carousel": "^1.8.1",
"tslib": "^1.9.3",
"xcel-observer": "*"
},
"peerDependencies": {
"react": "^16.8.0",
"react-bootstrap": "0.32.1",
"react-dom": "^16.8.0",
"react-fontawesome": "^1.6.1",
"react-router-dom": "^4.2.2",
"react-toastify": "^4.1.0",
"recompose": "^0.28.1",
"styled-components": "^2.4.0",
"xcel-asset-service": "*",
"xcel-react-animations": "*",
"xcel-react-core": "*",
"xcel-redux-orm": "*",
"xcel-util": "*"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"fix-me-test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject",
"dist": "tsc --declaration",
"dist:watch": "tsc --declaration --watch",
"storybook": "start-storybook -p 6006 -c .storybook"
},
"devDependencies": {
"//": "peerDependencies",
"#storybook/addon-actions": "^4.0.0",
"#storybook/addon-knobs": "^4.0.0",
"#storybook/react": "^4.0.0",
"#types/jest": "^22.2.3",
"#types/node": "^8.9.1",
"#types/react": "^16.3.16",
"#types/react-dom": "^16.0.4",
"#types/react-router-dom": "^4.2.3",
"awesome-typescript-loader": "^3.4.1",
"enzyme-adapter-react-16": "^1.1.0",
"jest": "^23.6.0",
"jest-cli": "^23.4.1",
"jest-styled-components": "4.9.0",
"react": "^16.8.0",
"react-bootstrap": "0.32.1",
"react-dom": "^16.8.0",
"react-fontawesome": "^1.6.1",
"react-router-dom": "^4.2.2",
"react-scripts-ts": "^3.1.0",
"react-toastify": "^4.1.0",
"recompose": "^0.28.1",
"styled-components": "^2.4.0",
"ts-jest": "^22.4.2",
"ts-node": "^5.0.1",
"typescript": "^2.9.0",
"xcel-asset-service": "*",
"xcel-react-animations": "*",
"xcel-react-core": "*",
"xcel-redux-orm": "*",
"xcel-util": "*"
},
"jest": {
"coverageReporters": [
"lcov",
"cobertura",
"text-summary"
],
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"testMatch": [
"<rootDir>/src/**/*.test.(ts|tsx)"
],
"collectCoverageFrom": [
"<rootDir>/src/**/*.(ts|tsx)",
"!<rootDir>/src/**/*.test.(ts|tsx)"
],
"transform": {
"\\.(ts|tsx)$": "ts-jest"
}
},
"publishConfig": {
"registry": "Blah blah removed"
}
}
I'm stuck with adding styled-components library into my reactjs project. I'm getting an error when trying to run my app in browser, not at the building stage. It's quite common:
Here is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
server: '../server/index.js',
app: './app.jsx',
},
resolve: {
extensions: ['.jsx', '.js'],
},
module: {
rules: [
{
test: /\.(jsx|js)?$/,
use: {
loader: 'babel-loader',
},
},
],
},
target: 'node',
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: './index.html',
excludeChunks: ['server'],
}),
],
};
Here is my babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-transform-runtime",
"babel-plugin-styled-components"
]
}
Here is my styled component:
import React from 'react';
import styled from 'styled-components';
export function SearchPage() {
const Container = styled.div`
text-align: center;
`;
return <Container>test</Container>;
}
Here is my package.json:
{
"devDependencies": {
"#babel/core": "^7.3.4",
"#babel/plugin-transform-runtime": "^7.4.0",
"#babel/preset-env": "^7.3.4",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"eslint": "^5.15.3",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0",
"husky": "^1.3.1",
"jest": "^24.5.0",
"live-server": "^1.2.1",
"nodemon": "^1.18.10",
"npm-run-all": "^4.1.5",
"prettier": "^1.16.4",
"react-redux": "^6.0.1",
"react-router": "^4.4.0",
"redux": "^4.0.1",
"rimraf": "^2.6.3",
"stream": "^0.0.2",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"version": "1.0.0",
"main": "dist/server.js",
"scripts": {
"clean": "rimraf dist build",
"dev": "npm-run-all -p dev:watch server:run dev:server",
"dev:build": "webpack --config webpack.dev.js",
"dev:watch": "yarn run dev:build --watch",
"dev:server": "live-server dist",
"server:run": "nodemon",
"prod:build": "npm-run-all clean webpack --config webpack.prod.js",
"test": "jest"
},
"dependencies": {
"express": "^4.16.4",
"html-webpack-plugin": "^3.2.0",
"webpack-merge": "^4.2.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^4.2.0"
}
}
I thought that Webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
I guess that the answer is pretty simple, but I cannot find it. So any advice will be helpful.
The thing is in target: 'node' into my package.json. It's supposed to use only for server-side build not for client.
JavaScript head out of memory while I compile using webpack build system. I don't know what is the problem.
Snapshot of error while on npm run build:prod
I'm using:
OS: Ubuntu 16.04,
RAM: 8Gig,
Processor: Inter Core-i5
Node.js, babel-minify-webpack-plugin.
Reactjs 16.2,and Redux
Here is Webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
const env = process.env.NODE_ENV || 'development'
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = {
entry: {
'/js/app': './frontend/app.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'public')
},
module: {
rules: [
{
test: /\.(scss|css|sass)$/i,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: [
path.resolve("./node_modules/")
]
}
}]
},
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, "frontend"),
exclude: path.resolve(__dirname, "node_modules"),
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
loader: 'url-loader?limit=4096&name=[name]-[hash].[ext]'
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},
externals: {
jquery: 'jQuery'
},
node: {
fs: "empty",
net: "empty"
},
plugins: [
new webpack.ProvidePlugin({
'videojs': 'video.js',
'window.videojs': 'video.js'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new MinifyPlugin(true, true)
]
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Here is my package.json file:
{
"name": "node-ejs",
"version": "1.0.0",
"description": "this is our first app using nodejs on express server with babel",
"main": "server.js",
"proxy": "http://10.1.0.7",
"scripts": {
"start": "nodemon ./server.js --exec babel-node --presets env",
"build:debug": "webpack -d --progress --colors",
"build:prod": "webpack -p --progress --colors",
"build": "webpack --config webpack.config.js"
},
"keywords": [
"nodejs",
"babel",
"express"
],
"watch": true,
"author": "",
"license": "ISC",
"dependencies": {
"#blueprintjs/core": "^1.35.0",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-minify-builtins": "^0.4.0",
"babel-plugin-minify-flip-comparisons": "^0.4.0",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.18.2",
"bootstrap": "^3.3.7",
"ejs": "^2.5.7",
"express": "^4.16.2",
"express-ejs-extend": "0.0.1",
"firebase": "^4.8.2",
"js-file-download": "^0.4.1",
"json-loader": "^0.5.7",
"material-design-icons": "^3.0.1",
"moment": "^2.22.0",
"node-sass": "^4.7.2",
"nodemon": "^1.14.5",
"npm": "^5.8.0",
"npm-install-peers": "^1.2.1",
"pure-render-decorator": "^1.2.1",
"query-string": "^6.0.0",
"re-base": "^3.2.2",
"react-addons-css-transition-group": "^15.6.2",
"react-bootstrap": "^0.31.5",
"react-breadcrumbs-dynamic": "^1.0.12",
"react-dom": "^16.2.0",
"react-file-download": "^0.3.5",
"react-jplayer": "^7.1.2",
"react-notifications": "^1.4.3",
"react-owl-carousel2": "^0.2.1",
"react-pager": "^1.3.3",
"react-placeholder": "^2.0.0",
"react-redux": "^5.0.6",
"react-rev-slider": "^1.0.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-share": "^1.19.0",
"react-slick": "^0.20.0",
"redux": "^3.7.2",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"sass-loader": "^6.0.6",
"save-dev": "^2.0.0",
"scss-loader": "0.0.1",
"slick-carousel": "^1.8.1",
"update": "^0.7.4",
"video.js": "^6.6.0",
"videojs-contrib-dash": "^2.9.2",
"videojs-ima": "^1.0.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"devDependencies": {
"#babel/preset-env": "^7.0.0-beta.44",
"babel-cli": "^6.26.0",
"babel-minify": "^0.4.0",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-preset-env": "^1.6.1",
"babel-preset-minify": "^0.4.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-register": "^6.26.0",
"css-loader": "^0.28.7",
"file-loader": "^1.1.6",
"img-loader": "^2.0.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"postcss-loader": "^2.0.10",
"react": "^16.2.0",
"react-dfp": "^0.7.0",
"react-modal": "^3.1.10",
"react-router-bootstrap": "^0.24.4",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2"
}
}
I can pass this error by this code
$ NODE_OPTIONS="--max-old-space-size=1024" yarn test