We Keep Coding

Webpack: size exceeds the recommended limit (244 KiB)

Here is the branch and repo in question: https://github.com/Futuratum/moon.holdings/tree/dev
Hi I'm running into this problem, because I have an assets folder with a lot of images. I don't care about the size, this should be normal for modern web users.
How do I ignore this error?
I found this answer here, but it didn't help as I was already implementing the devtools config.
Webpack 4 "size exceeds the recommended limit (244 KiB)"
Here is my webpack.config:
/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import chalk from 'chalk';
const moonholdings = path.resolve(__dirname, 'moonholdings');
const app = path.resolve(__dirname, 'app');
const nodeModules = path.resolve(__dirname, 'node_modules');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.join(__dirname, '/app/index.html'),
inject: 'body'
});
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: 'moonholdings.css',
disable: false,
allChunks: true
});
const CopyWebpackPluginConfigOptions = [{
from: 'app/static',
to: 'static/'
}];
const CopyWebpackPluginConfig = new CopyWebpackPlugin(CopyWebpackPluginConfigOptions);
const PATHS = {
app,
build: moonholdings
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
});
const base = {
entry: ['babel-polyfill', PATHS.app],
output: {
path: PATHS.build,
publicPath: '/',
filename: 'index_bundle.js'
},
resolve: {
modules: [app, nodeModules]
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.s?css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
}
};
const developmentConfig = {
devtool: 'inline-source-map',
devServer: {
contentBase: moonholdings
},
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig
]
};
const productionConfig = {
devtool: false,
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
};
console.log(`${chalk.magenta('฿')} ${chalk.green('yarn run:')} ${chalk.red(LAUNCH_COMMAND)}`);
export default Object.assign(
{}, base,
isProduction === true ? productionConfig : developmentConfig
);
And the package.json
{
"name": "moon.holdings",
"version": "1.0.0",
"description": "Cryptocurrency asset portfolio",
"main": "index.js",
"repository": "https://github.com/Futuratum/moon.holdings.git",
"author": "Leon Gaban <leongaban#gmail.com>",
"license": "MIT",
"scripts": {
"start": "webpack && webpack-dev-server",
"webpack": "webpack-dev-server",
"dev": "webpack-dev-server",
"build": "webpack -p",
"production": "webpack -p",
"test": "yarn run test-eslint; yarn run test-jest:update",
"test-eslint": "eslint app",
"test-eslint:fix": "eslint --fix app",
"test-sasslint": "./node_modules/.bin/sass-lint 'app/**/*.scss' -v -q",
"test-jest": "jest",
"test-jest:watch": "jest --watch",
"test-jest:coverage": "jest --coverage",
"test-jest:update": "jest --updateSnapshot"
},
"setupFiles": [
"<rootDir>/config/polyfills.js",
"<rootDir>/src/setupTests.js"
],
"now": {
"name": "moonholdings",
"engines": {
"node": "8.11.3"
},
"alias": "moon.holdings"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules",
"app"
],
"setupTestFrameworkScriptFile": "./app/utils/testConfigure.js"
},
"dependencies": {
"axios": "^0.18.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.3.2",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^0.28.10",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-node": "^0.3.2",
"eslint-plugin-dependencies": "^2.4.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"flexboxgrid": "^6.3.1",
"git-hooks": "^1.1.10",
"history": "^4.7.2",
"html-webpack-plugin": "^3.0.6",
"jest": "^22.4.2",
"lodash": "^4.17.10",
"node-sass": "^4.7.2",
"path-to-regexp": "^2.2.0",
"ramda": "^0.25.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "^4.0.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-sortable-hoc": "^0.6.8",
"react-test-renderer": "^16.3.2",
"redux": "^3.7.2",
"redux-mock-store": "^1.5.1",
"redux-thunk": "^2.2.0",
"rest": "^2.0.0",
"sass-lint": "^1.12.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.2",
"svg-inline-loader": "^0.8.0",
"svg-loader": "^0.0.2",
"url-loader": "^1.0.1",
"webpack": "^3.3.0",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "2.11.1"
}
}

The webpack 4 feature that's creating the warning is called Performance Hints.
By default, webpack warns If the entry bundle size is larger than 250 KB (244 KiB).
You can customize this limit, as explained in the documentation, by adding this to your webpack config:
performance: {
maxAssetSize: 1000000
}
This would set the limit to 1 MB.
If you want to turn off webpack's performance hints altogether, you can do it like this (as explained in the documentation):
performance: {
hints: false
}

Webpack generates a bundle.min.js file per image

I have a React project with a lot of images and Webpack2 configuration. Whenever I build my project it generates one bundle file per image - which results in about 140 bundle.min.js files:
I've been searching like a fanatic to find out why or if there is a better way to do this (it would be wonderful if i could just have one file for all these - if possible?). Here is my code:
webpack.config.prod.js
// PRODUCTION
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const entry = {
app: path.join(process.cwd(), 'src/app.js')
}
const output = {
path: path.join(__dirname, 'dist'),
filename: 'bundle.min.js',
}
const plugins = [
new webpack.DefinePlugin({
// 'process.env.NODE_ENV': JSON.stringify('production')
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
mangle: false,
compress: {
warnings: false
}
}),
new ExtractTextPlugin('bundle.css'), // creation of HTML files to serve your webpack bundles
new HtmlWebpackPlugin({
template: 'index-template.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'bundle',
filename: '[name].common.js'
})
]
const config = {
context: path.join(__dirname, 'src'),
entry: entry,
output: output,
devtool: "source-map",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
use: "babel-loader"
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: { limit: 10000, name: './images/[name].[ext]' } // Convert images < 10k to base64 strings (all in images folder)
}]
},
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [ require('autoprefixer')() ]
}
},
'sass-loader',
]
})
}
]
},
plugins: plugins,
externals: {
jquery: 'jQuery'
}
}
module.exports = config;
package.json
{
"name": "magdenmagden",
"version": "1.0.0",
"description": "A webbased art gallery",
"main": "index.js",
"author": "fransBernhard <mimilundberg#fransbernhard.se>",
"license": "ISC",
"scripts": {
"start": "NODE_ENV=development node dev-server.js --history-api-fallback",
"build": "rimraf dist && NODE_ENV=production webpack --config webpack.config.prod.js",
"test": "rimraf jest/__snapshots__ coverage && jest --no-cache --coverage"
},
"jest": {
"transform": {
"^.+\\.(js|jsx$)": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/jest/config/styleTransform.js",
"^.+\\.(jpg|jpeg|png|gif)$": "<rootDir>/jest/config/fileTransform.js"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleNameMapper": {
".*\\.scss$": "<rootDir>/jest/config/styleTransform.js"
}
},
"dependencies": {
"axios": "^0.16.2",
"backstopjs": "^2.7.5",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-jest": "^20.0.3",
"babel-loader": "^7.0.0",
"babel-plugin-dynamic-import-node": "^1.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.2",
"eslint": "^3.19.0",
"eslint-config-react-app": "^1.0.4",
"eslint-loader": "^1.7.1",
"eslint-plugin-flowtype": "^2.34.0",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"json-loader": "^0.5.4",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.5",
"prop-types": "^15.5.10",
"react-hot-loader": "^3.0.0-beta.7",
"react-modal": "^1.7.7",
"react-router": "^3.0.5",
"react-router-dom": "^4.1.1",
"react-scrollchor": "^3.0.0",
"react-test-renderer": "^15.5.4",
"rimraf": "^2.6.1",
"sass-loader": "^6.0.5",
"screener-storybook": "^0.7.10",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
}
}
So effing greatful for any input!

Webpack SCSS - Wrong file and line in sourcemap

sourcemaps lists the wrong file and line
Example:
if i have class .example in my SCSS file in line 8, sourcemaps will list it in line 3246
clicking on the source in the dev tools redirects you to line 8 in the SCSS file where u can see the class isn't listed there
checking the CSS file u see .example in line 3246.
Things i tried:
Changing devtool to either source-map or inline-source-map
Adding sourceMap query to resolve-url-loader
Removing ExtractTextPlugin
Webpack Config:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
module.exports = {
devtool: 'eval',
debug: true,
entry: {
app: path.resolve(__dirname, './site/js/app.js'),
vendor: path.resolve(__dirname, './site/js/vendor.js')
},
output: {
path: path.resolve(__dirname, './site/dist'),
publicPath: '/dist/',
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
module: {
loaders: [
{ //Handle HTML Templates
test: /\.html$/,
exclude: /partials/,
loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './site')) + '/!html'
}, { //Handle HTML Partials
test: /\.html$/,
include: /partials/,
loader: 'ng-cache?prefix=partials'
}, { //Handle Images
test: /\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=images/[name].[hash].[ext]',
'image-webpack'
]
} , { //Handle Fonts
test: /\.(eot|otf|ttf|woff|woff2)$/i,
loader: 'file?hash=sha512&digest=hex&name=fonts/[name].[hash].[ext]'
} , { //Handle SCSS
test: /\.scss/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap")
}
]
},
htmlLoader: {
ignoreCustomFragments: [/\{\{.*?}}/],
root: path.resolve(__dirname, './site/'),
attrs: ['img:src', 'img:ng-src']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor'],
minChunks: Infinity
}),
new ExtractTextPlugin("[name].css"),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './site/templates/index.ejs'),
filename: path.resolve(__dirname, './views/home.ejs'),
minify: {
removeComments: true
}
}),
new ScriptExtHtmlWebpackPlugin({
defer: [/app/, /vendor/],
defaultAttribute: 'async'
})
]
};
package.json
"dependencies": {
...
},
"devDependencies": {
"angular-mocks": "^1.5.8",
"autoprefixer": "^6.5.3",
"chai": "3.5.0",
"colors": "1.0.3",
"concurrently": "^2.2.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-batch": "^1.0.5",
"gulp-sass": "^2.3.1",
"gulp-sass-lint": "^1.2.0",
"gulp-sourcemaps": "^1.6.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"image-webpack-loader": "^2.0.0",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "3.1.0",
"ng-annotate-webpack-plugin": "^0.1.3",
"ng-cache-loader": "0.0.21",
"ngtemplate-loader": "^1.3.1",
"node-sass": "^3.13.0",
"nodemon": "1.2.1",
"postcss-loader": "^1.2.0",
"resolve-url-loader": "^1.6.0",
"rimraf": "^2.5.4",
"sass-loader": "^4.0.2",
"sassdoc": "^2.1.20",
"script-ext-html-webpack-plugin": "^1.3.0",
"strip-loader": "^0.1.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-merge": "^0.14.1"
}

[Babel]: Unknown option: foreign.Children

I'm getting that error when I build using this script:
webpack --colors --progress --watch --config --jsx-loader webpack.config.js
Here's my package.json file:
{
"dependencies": {
"autoprefixer": "^6.0.3",
"node-libs-browser": "^0.5.3",
"object-assign": "4.0.1",
"underscore": "1.8.3",
"react": "0.14.7",
"react-dom": "0.14.7",
"react-router": "2.0.0",
"history": "^1.17.0",
"superagent": "^1.8.0",
"react-addons-css-transition-group": "0.14.7",
"react-bootstrap": "0.28.2",
"react-select": "^1.0.0-beta9",
"moment": "2.11.2",
"truncate": "2.0.0",
"superagent-promise-plugin": "2.1.0",
"rrule": "2.1.0"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.23.1",
"eslint": "^3.2.2",
"eslint-config-defaults": "^9.0.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^6.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"isparta-instrumenter-loader": "^1.0.1",
"jsx-loader": "0.13.2",
"less": "^2.3.1",
"less-loader": "^2.2.3",
"livereload": "^0.5.0",
"null-loader": "^0.1.1",
"postcss-loader": "^0.9.1",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"webpack": "^1.12.13",
"webpack-livereload-plugin": "0.4.0"
},
"babel": {
"presets": [
"stage-0",
"es2015",
"react"
]
}
}
And my webpack.config.js
var webpack = require('webpack');
var path = require('path');
var LiveReloadPlugin = require('webpack-livereload-plugin')
module.exports = {
output: {
path: __dirname,
filename: "bundle.js",
},
resolve: {
extensions: ['', '.js', '.jsx'],
root: [
path.resolve('./../../../../../../Javascripts/modules')
],
moduleDirectories:
[
'./../../../../../../Javascripts/modules'
]
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{
test: /\.less$/,
loader: "style!css!less"
},
{ test: /\.html$/, loader: 'raw', exclude: [/node_modules/, path.resolve('./../../../../../../Javascripts/modules')] },
{
test: /(\.jsx|\.js)$/,
loader: 'babel',
exclude: [/(node_modules|bower_components)/]
},
{
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: [/node_modules/, path.resolve('./../../../../../../Javascripts/modules')]
}
]
},
eslint: {
configFile: './src/js/.eslintrc'
},
entry: "./src/index.js",
plugins: [
new LiveReloadPlugin()
]
};
Any idea how to resolve that error? Based on my Google searches, it's a package versioning issue, but that's all I've been able to figure out.

You might be missing the react babel presets npm package.
Try this:
npm i --save-dev babel-preset-react

I ended up rolling back to Babel 5, and this issue went away. Not a great answer for those who might find this later on, but it works fine for my app.

Invalid HMR message error Webpack

I'm getting the following error from Webpack:
Invalid HMR message Followed by a string of very detailed JSON.
There really aren't any resources that I can find to better debug this. Any tips?
Bonus if anyone can give me insight to why require can't be found when it's used throughout the app no problem.
Here are some details:
Running Node/Babel
Using Webpack
NPM dependencies:
"dependencies": {
"babel-core": "^6.7.2",
"babel-polyfill": "^6.7.4",
"body-parser": "~1.12.0",
"cookie-parser": "~1.3.4",
"css-modules-require-hook": "^4.0.0",
"cuid": "^1.3.8",
"debug": "~2.1.1",
"express": "~4.12.2",
"fs": "0.0.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1",
"serve-favicon": "~2.2.0",
"webpack": "^1.12.13"
},
"devDependencies": {
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.7.2",
"cross-env": "^1.0.7",
"css-modules-require-hook": "^4.0.0",
"eslint": "^2.6.0",
"redux-devtools": "^3.1.1",
"redux-devtools-dock-monitor": "^1.1.0",
"redux-devtools-log-monitor": "^1.0.4",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.10.0"
}
Webpack config:
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
devtool: 'cheap-source-map',
entry: ['webpack-hot-middleware/client',
'./index.js',
],
target: 'node',
output: {
path: __dirname,
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css?modules',
},
{
test: /\.jsx*$/,
exclude: [/node_modules/, /.+\.config.js/],
loader: 'babel',
query: {
presets: ['react-hmre'],
},
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
CLIENT: JSON.stringify(true)
}
})
],
externals: nodeModules
};

Set your target from node to web for the client.js.
If you are bundling a server side React app, you can add to the top of server file:
require('css-modules-require-hook')({
generateScopedName: '[name]--[local]',
prepend: []
});
So that the css-files required in SSR react components work.

You will want to set target to 'web' because your intention is to compile for the web.
You should set the engine to node (which is what I'm assuming you were trying to do using target).
target: "web",
engines: {
node: "4.x"
},