We Keep Coding

Webpack production mode does not minify js file

I created react app with by initializing webpack with npm init -y and then modified scripts and webpack config file manually. My file's contents are as below:
package.json
{
"name": "arw.ecahangirov",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
"build": "webpack --mode production ./frontend/src/index.js --output ./static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"uglifyjs-webpack-plugin": "^2.2.0",
"weak-key": "^1.0.1",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"axios": "^0.19.0",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.24.0",
"style-loader": "^1.0.0"
}
}
webpack.config.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".js", ".jsx", ".css"]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
include: /\.js$/
})
]
}
};
Problem is that, when I run npm run build, webpack does not minify main.js file which is output. It results with 716kb file size and by opening output file I observe that file is multilined and also contains comments. Why webpack does not care of minifiying in this case, although I started it with --mode production?

You have to specify a minifier for css.
Load this at top of your webpack config file
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
To the rules block:
rules: [
//...
{
test: /\.(sa|sc|c)ss$/,
use: [{loader: MiniCssExtractPlugin.loader},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
//...
]
To the optimization block:
optimization: {
minimizer: new OptimizeCSSAssetsPlugin({})
}
To the plugins block:
plugins: [
//...
new MiniCssExtractPlugin({
filename: [name].[hash].css',
chunkFilename: '[id].[hash].css',
}),
//...
]
You will need to load that plugins first
npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
You can find a working config here

Cannot find module 'html-webpack-plguin' React start

I am trying to create a React app that isn't create-react-app and I am running into some issues. After running npm run start I received the "Cannot find module 'html-webpack-plguin'" error. I know it's installed, as I can see it in the node modules folder. I have tried using both npm install and yarn install for this. I have put in in the devDependencies and the regular dependencies, and neither seems to work. Is there something wrong with my webpack file or package.json?
Here is my webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plguin')
module.exports +{
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
Here is my package.json
{
"name": "reactboilerplate",
"version": "1.0.0",
"description": "React Webpack Redux Babel Boilerplate",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "Thomas Baric",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"webpack": "^4.29.3"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}

Well that was easy lol. Error became clear after seeing it as a title to my question. FML!

'webpack' not recognizing when running within the project

When I try to run 'webpack' within the project the command line displays the following error:
'webpack' is not recognized as an internal or external command, operable program or batch file.
I have installed webpack with the command,
npm install webpack babel-core babel loader babel-preset-es2015 babel-preset-react react react-dom --save
Even though I tried this accepted answer , it comes with another error.
webpack.config.js file
module.exports = {
entry: './src/index.js',
output: {
path: './dist',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}}
package.json file
{
"name": "dummytextgen",
"version": "1.0.0",
"description": "Simple dummy text generator",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"webpack": "^4.5.0"
},
"devDependencies": {
"webpack-cli": "^2.0.14"
}
}
Using OS - Windows 8 ,
npm version - 5.6.0

You might try to give the exact path to the webpack binary when you try to execute weback from within your project folder:
node_modules\.bin\webpack

As per the screenshot you need to update the rules ,I have updated the configuration file its working fine. Please go through.
webpack.config.js
var path=require('path')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + "/dist",
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}}
package.json
{
"name": "dummytextgen",
"version": "1.0.0",
"description": "Simple dummy text generator",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "webpack --config webpack.config.js --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"webpack": "^4.5.0"
},
"devDependencies": {
"webpack-cli": "^2.0.14"
}
}

npm install webpack webpack-cli -g
should help

Require is not defined using ReactJs with babel and webpack

I'm getting this error on Chrome developer tools:
"Uncaught Reference: Require is not defined"
webpack.config
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
filename: 'app.js',
path: __dirname + "public/scripts"
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["env", "react"]
}
}
]
}
};
package.json
{
"name": "widget",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Diogo Matias",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"npm": "^5.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.3",
"react-leaflet": "^1.7.8"
},
"devDependencies": {
"webpack": "^3.10.0"
}
}
This error comes from the import on my source javascript file where I have:
import {GoogleMap, Marker} from "react-google-maps";
I use the cdn for react and react-dom. I'm used to use live-server and I'm new to webpack. I run with webpack-dev-server on the root directory.
Hope that is enough for you to help me.
Thanks.

Here is a minimum configuration to get you started. Issue npm run start to bring up webpack-dev-server at port 9000. babel-core was missing from your configuration.
project structure
├── build
│   └── index.html
├── package.json
├── src
│   └── app.js
└── webpack.config.js
package.json
{
"name": "widget",
"version": "1.0.0",
"description": "Get started with Webpack!",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "Diogo Matias",
"license": "ISC",
"dependencies": {
"leaflet": "^1.2.0",
"prop-types": "^15.5.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.3",
"react-leaflet": "^1.7.8"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
devServer: {
contentBase: path.join(__dirname, 'build'),
compress: true,
port: 9000
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/
}
]
}
};
.babelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["last 3 Chrome versions"]
}
}]
]
}
build/index.html
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>

Minified React with Webpack is not working

I am developing a web app in React using Webpack. I have followed this guide to generate bundle.js in production mode, but it is not working. I always get:
Warning: It looks like you're using a minified copy of the development
build of React. When deploying React apps to production, make sure to
use the production build which skips development warnings and is
faster.
This is my webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var ExtractTextPlugin = require('extract-text-webpack-plugin');//FOR CSS
var config = {
devtool:'cheap-module-source-map',
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]')
}
]
},
plugins: [
new ExtractTextPlugin('styles.css', {allChunks: false}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: true
}
})
]
};
module.exports = config;
And this is the package.json file I am using:
{
"name": "p12uibetajsx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack -d",
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.18.2",
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1",
"webpack-combine-loaders": "^2.0.3"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-responsive-carousel": "^3.0.21",
"webpack": "^1.13.3",
"webpack-combine-loaders": "^2.0.3"
}
}
Is there anything else I need to configure? Am I missing something?
Thank you very much.