We Keep Coding

All the npm packages get uninstalled when installing a new package, react js application

I am using a typescript-based start kit for my reactjs application. But, the problem is, everytime that I install a new npm package, all other previous packages (apparently) get uninstalled since I get an error of "failed to load module ..." and I have to install them again. I really appreciate any help. Here is my webpack config:
const {resolve} = require('path');
const {CheckerPlugin} = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
context: resolve(__dirname, '../../src'),
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
},
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
}],
},
{
test: /\.(scss|sass)$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
],
},
],
},
devServer: {
historyApiFallback: true,
},
plugins: [
new CheckerPlugin(),
new HtmlWebpackPlugin({template: 'index.html.ejs',}),
],
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
performance: {
hints: false,
},
};
and here is the config for development mode:
const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
mode: 'development',
entry: [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.tsx' // the entry point of our app
],
devServer: {
hot: true, // enable HMR on the server
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
],
});
and package.json file:
"name": "react-webpack-typescript-starter",
"version": "0.1.0",
"description": "Starter kit for React, Webpack (with Hot Module Replacement), Typescript and Babel.",
"keywords": [
"react",
"webpack",
"typescript",
"babel",
"sass",
"hmr",
"starter",
"boilerplate"
],
"author": "Viktor Persson",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/vikpe/react-webpack-typescript-starter.git"
},
"bugs": {
"url": "https://github.com/vikpe/react-webpack-typescript-starter/issues"
},
"homepage": "https://github.com/vikpe/react-webpack-typescript-starter",
"scripts": {
"build": "yarn run build:css clean-dist && webpack -p --config=configs/webpack/prod.js",
"clean-dist": "rimraf dist/*",
"lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
"start": "yarn run start-dev ",
"start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
"start-prod": "yarn run build && node express.js",
"test": "jest --coverage --watchAll --config=configs/jest.json",
"build:css": "postcss src/styles/tailwind.css -o src/styles/global.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/global.css"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/jest": "^26.0.5",
"#types/node": "^14.11.10",
"#types/react": "^16.9.43",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.6.1",
"#typescript-eslint/parser": "^3.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"eslint": "^7.5.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"express": "^4.17.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"image-webpack-loader": "^6.0.0",
"jest": "^26.1.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"rimraf": "^3.0.2",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"typescript": "^3.9.7",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#nivo/line": "^0.63.1",
"#welldone-software/why-did-you-render": "^5.0.0-rc.1",
"autoprefixer": "^10.0.1",
"axios": "^0.20.0",
"postcss": "^8.1.1",
"postcss-cli": "^8.0.0",
"postcss-loader": "^4.0.3",
"purgecss": "^3.0.0",
"react-date-range": "^1.1.3",
"react-datepicker": "^3.3.0",
"react-hook-form": "^6.9.4",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-toastify": "^6.0.9",
"styled-components": "^5.2.0",
"tailwindcss": "^1.8.11"
}
}

ReactJS CSS: "Unexpected token, expected ;"

I've added a css file to my ReactJS page.
The styling works perfectly fine when I run the App using "npm start", however when I make the production build with "npm run build" I'm getting the following error:
"Unexpected token, expected ;"
react-authentication-frontend#1.0.0 lint C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend
> eslint ./src ./tests
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend\node_modules\babel-core\lib\transformation\file\index.js:558
throw err;
^
SyntaxError: C:/Users/Simon/Documents/GitHub/videoinwerken/react_frontend/src/components/Pages/Employer/Employees/AddEmployees/style.css: Unexpected token, expected ; (2:5)
1 | html,
> 2 | body {
| ^
3 | width: 100%;
4 | height: 100%;
5 | }
at Parser.pp$5.raise (C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend\node_modules\babylon\lib\index.js:4454:13)
See my code below
SomePage.js
import React, { Component } from "react";
import "./style.css";
export default class ExcelPage extends Component {
constructor(props) {
super(props);
}
render() {
return <div>hello, this page is broken</div>;
}
}
style.css
html,
body {
width: 100%;
height: 100%;
}
I'm running the following webpack config:
Webpack
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const PROD = process.env.NODE_ENV === 'production';
const DEV = !PROD;
const DevToolPlugin = PROD
? webpack.SourceMapDevToolPlugin
: webpack.EvalSourceMapDevToolPlugin;
const config = {
entry: ["./src/index"],
output: {
filename: DEV ? "bundle.js" : "bundle.[hash].js",
path: path.resolve(__dirname, "dist"),
publicPath: "/"
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 20000
}
},
"image-webpack-loader"
]
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: true,
filename: 'index.html'
}),
new DevToolPlugin({
filename: "[file].map"
})
],
devServer: {
historyApiFallback: true,
}
};
!PROD && (config.devtool = 'source-map');
PROD && config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compressor: {
warnings: false,
}
})
);
PROD && config.plugins.push(
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
);
module.exports = config;
package.json
{
"name": "react-authentication-frontend",
"version": "1.0.0",
"description": "React Authentication Frontend",
"main": "src/index.js",
"repository": "https://github.com/ZachLiuGIS/reactjs-auth-django-rest",
"homepage": "/videoinwerken/",
"scripts": {
"clean": "rimraf ./dist",
"lint": "eslint ./src ./tests",
"build": "npm run clean && npm run test && webpack --progress --profile --colors",
"start": "webpack-dev-server --port 8083",
"test": "npm run lint && mocha --require babel-register ./tests/setup.js --recursive ./tests/**/*.spec.js",
"test:watch": "npm run test -- --watch"
},
"author": "Zach Liu",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.5.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"classnames": "^2.2.6",
"css-loader": "^0.28.11",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.20.0",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.11",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.6.0",
"jquery": "^3.5.1",
"jsdom": "^11.12.0",
"mini-css-extract-plugin": "^1.0.0",
"mocha": "^4.1.0",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"proptypes": "^1.1.0",
"react-test-renderer": "^16.13.1",
"redux-logger": "^3.0.6",
"rimraf": "^2.7.1",
"sinon": "^4.5.0",
"sinon-chai": "^2.14.0",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^4.1.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#material-ui/core": "^4.10.2",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"antd": "^3.20.1",
"axios": "^0.19.2",
"dnd-core": "^2.6.0",
"fontsource-roboto": "^2.1.4",
"immutability-helper": "^3.1.1",
"lodash": "^4.17.15",
"material-ui": "^0.20.2",
"nodemailer": "^6.4.13",
"react": "^16.13.1",
"react-beautiful-dnd": "^13.0.0",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "^16.13.1",
"react-excel-renderer": "^1.1.0",
"react-player": "^2.6.0",
"react-redux": "^5.1.2",
"react-router-dom": "^5.2.0",
"redux": "^3.7.2",
"redux-form": "^7.4.3",
"redux-form-validators": "^2.7.5",
"redux-notifications": "^4.0.1",
"redux-thunk": "^2.3.0",
"webpack-cli": "^3.3.7",
"html-webpack-plugin": "^3.2.0"
}
}
.babelrc
{
"presets": [
"react",
[
"env"
]
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}

Can't get babel to transpile spread operator even WITH plugin

I am trying to make Babel + Webpack transpile my files for IE11 and Safari 10. No matter what I do I cannot make it work.
I have tried uninstalling and reinstalling webpack and babel. I have tried changing just about anything within webpack.config.js and .babelrc. I have tried making a babel.config.js and webpack.config.babel.js.
I tried running
npx babel node_modules/vuetify --plugins=#babel/plugin-transform-spread,#babel/plugin-transform-parameters --presets=#babel/preset-env --no-babelrc
and outputted with spread operators still inside.
I tried compiling with webpack and spread operators are still present.
package.json
{
"name": "aspnetcore-vuejs-typescript-template",
"version": "0.1.0",
"main": "app.js",
"license": "MIT",
"author": "Danijel Hrcek",
"scripts": {
"dev": "./node_modules/.bin/webpack-cli --mode development --watch --progress --config webpack.config.js",
"build:dev": "./node_modules/.bin/webpack-cli --mode development --config webpack.config.js",
"build:prod": "./node_modules/.bin/webpack-cli --mode production --config webpack.config.js",
"publish": "npm install && ./node_modules/.bin/webpack-cli --mode production --config webpack.config.js && dotnet publish --configuration Release",
"test": "jest"
},
"dependencies": {
"acorn": "^7.0.0",
"apexcharts": "^3.8.5",
"axios": "^0.19.0",
"bulma": "0.7.5",
"bulmaswatch": "0.7.2",
"classlist-polyfill": "^1.2.0",
"core-js": "^3.2.1",
"fibers": "^3.1.1",
"portal-vue": "^2.1.6",
"regenerator-runtime": "^0.13.3",
"vue": "2.6.10",
"vue-apexcharts": "^1.4.0",
"vue-flatpickr-component": "8.1.2",
"vue-multiselect": "2.1.6",
"vue-notification": "1.3.16",
"vue-router": "3.0.6",
"vue2-animate": "^2.1.1",
"vuetify": "^2.0.5",
"vuetify-loader": "^1.3.0",
"vuex": "3.1.1"
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/plugin-transform-spread": "^7.2.2",
"#babel/preset-env": "^7.5.5",
"#babel/register": "^7.5.5",
"#mdi/font": "^3.9.97",
"#types/jquery": "3.3.29",
"#types/node": "12.0.2",
"#vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"#vue/babel-preset-jsx": "^1.1.0",
"#vue/test-utils": "1.0.0-beta.29",
"aspnet-webpack": "3.0.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "2.0.2",
"compression-webpack-plugin": "2.0.0",
"css-loader": "2.1.0",
"deepmerge": "^4.0.0",
"es6-promise-promise": "1.0.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "3.0.1",
"html-webpack-plugin": "3.2.0",
"jest": "24.8.0",
"jest-serializer-vue": "2.0.2",
"node-sass": "4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"resolve-url-loader": "3.1.0",
"sass": "^1.22.9",
"sass-loader": "^7.1.0",
"style-loader": "0.23.1",
"ts-loader": "^6.0.1",
"typescript": "^3.4.5",
"url-loader": "1.1.2",
"vue-class-component": "7.1.0",
"vue-jest": "3.0.4",
"vue-loader": "15.7.0",
"vue-property-decorator": "8.1.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "2.6.10",
"webpack": "^4.39.3",
"webpack-cli": "3.3.2",
"webpack-dev-server": "3.4.1",
"webpack-hot-middleware": "2.25.0"
}
"browserslist": [
"defaults", "safari 10", "not ie <= 10"
]
}
.babelrc
{
"presets": [ "#babel/preset-env" ],
"plugins": [ "#babel/plugin-proposal-object-rest-spread", "#babel/plugin-transform-spread", "#vue/babel-preset-jsx", "#babel/plugin-transform-parameters" ]
}
Within webpack.config.js
{
test: /\.m?js$/,
exclude: /node_modules\/(?!(vuetify|vuetify-loader|vue)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ["#babel/plugin-proposal-object-rest-spread", "#babel/plugin-transform-spread"]
}
}
},
{
test: /\.jsx?$/,
include: [
'/node_modules/vuetify/src'
],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ["#babel/plugin-proposal-object-rest-spread", "#babel/plugin-transform-spread", "#vue/babel-preset-jsx", "#babel/plugin-transform-parameters"]
}
}
},
Expected output:
function mixins() {
//emulates spread operator
}
Actual output:
function mixins(...args) {}

FWIW I think this has been fixed since the question was asked. Create a folder with files as below:
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"author": "RichN",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",
"webpack": "^5.32.0",
"webpack-cli": "^4.6.0"
}
}
webpack.config.js
module.exports = {
devtool: "source-map",
mode: "development",
target: ["web", "es5"],
entry: "./app.js",
output: {
filename: "bundle.js",
path: __dirname
},
resolve: {
extensions: [".js", ".jsx"]
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: [
["#babel/preset-env", {
"targets": "defaults"
}]
],
plugins: [
"#babel/plugin-proposal-object-rest-spread"
]
}
}]
}
]
}
}
app.js
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3));
index.html
<!DOCTYPE html>
<body>
<script src="bundle.js"></script>
</body>
Then issue commands npm i and npx webpack in that folder. The code gets transpiled to the code below in bundle.js:
function sum() {
for (var _len = arguments.length, theArgs = new Array(_len), _key = 0; _key < _len; _key++) {
theArgs[_key] = arguments[_key];
}
return theArgs.reduce(function (previous, current) {
return previous + current;
});
}
console.log(sum(1, 2, 3));
If you now load index.html as a file in Internet Explorer this code runs fine and outputs 6 in the console window

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 ExtractTextPlugin with boostrap-sass

I am using bootstrap sass and extract text-plugin to output the compiled css into a file. It works perfectly if I don't import bootstrap inside my style.scss, but when I import bootstrap webpack can't resolve the font paths. It looks for bootstrap fonts in my src folder instead of the /node_modules/bootstrap-sass/
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.svg in /Users/yasinyaqoobi/Sites/dari-dictionary-api/src/assets/sass
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
package.json
{
"name": "dari-dictionary-api",
"version": "1.0.0",
"description": "Dari Dictionary API built with express.js for the Android App.",
"main": "dist",
"scripts": {
"dev": "nodemon --ignore src/assets -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "node dist",
"prestart": "npm run -s build",
"test": "eslint src",
"watch": "webpack --display-error-details --config webpack.config.js --watch"
},
"repository": {
"type": "git",
"url": ""
},
"author": "Yasin Yaqoobi",
"license": "MIT",
"dependencies": {
"body-parser": "^1.13.3",
"bootstrap-sass": "^3.3.7",
"compression": "^1.5.2",
"cors": "^2.7.1",
"express": "^4.13.3",
"nunjucks": "^3.0.0",
"path": "^0.12.7"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.20.0",
"css-loader": "^0.26.1",
"eslint": "^3.1.1",
"express-winston": "^2.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"node-sass": "^4.0.0",
"nodemon": "^1.9.2",
"sass-loader": "^4.0.2",
"sqlite3": "^3.1.8",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"winston": "^2.3.0"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('public/css/style.css');
module.exports = {
entry: path.resolve(__dirname, 'src/assets/js'),
output: {
filename: 'public/js/index.js',
},
devtool: "source-map",
module: {
loaders: [{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
exclude: /node_modules/,
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
// Options to configure babel with
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0'],
}
},
{ test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) },
{ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/
, loader: 'url?limit=100000&name=[name].[ext]'
}
]
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ // Make jquery available globally
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
],
debug: true,
}