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

Webpack with sourcemap can't resolve variables in production mode

I would like to generate source maps for our production build with Webpack. I managed to generate it, but when I stop on a breakpoint in the debugger, variables are not resolved:
What am I doing wrong? How can I generate a source map that lets the chrome devtools resolve the variables once I stopped on a breakpoint in the debugger?
These are my webpack configurations:
webpack.config.js:
const path = require('path');
const ROOT = path.resolve( __dirname, 'src/main/resources/packedbundle' );
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
context: ROOT,
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'eslint-loader',
options: {
failOnError: true,
quiet: true
}
}
],
enforce: 'pre'
},
{
test: /\.ts$/,
exclude: [ /node_modules/ ],
use: [
'ng-annotate-loader',
'awesome-typescript-loader'
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: '../'
}),
},
{
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
},
{
test: /\.(svg|woff|woff2|eot|ttf)$/,
use: 'file-loader?outputPath=fonts/'
},
{
test: /.html$/,
exclude: /index.html$/,
use: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'AngularJS - Webpack',
template: 'index.html',
inject: true
}),
new LoaderOptionsPlugin({
debug: true
}),
new ExtractTextPlugin('css/style.css')
],
entry: './index.ts'
};
webpack-prd.config.js:
const path = require('path');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.config.js');
const DESTINATION = path.resolve( __dirname, 'dist/packedbundle' );
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = webpackMerge(commonConfig, {
devtool: 'module-source-map',
mode: 'production',
output: {
path: DESTINATION,
filename: 'js/[name]-bundle-[chunkhash].js'
},
optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: true
})
]
}
});
package.json:
{
"name": "com.avon.maps.packedbundle.webcontent",
"version": "1.0.0",
"description": "Packed bundle creation screen frontend",
"main": "index.js",
"scripts": {
"prestart": "rimraf dist",
"start": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-dev.config.js",
"prebuild": "rimraf dist",
"build": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-prd.config.js",
"test": "mocha -r ts-node/register -r ignore-styles -r jsdom-global/register __tests__/**/*.spec.ts"
},
"author": "BlackBelt",
"private": true,
"engines": {
"node": "11.10.0"
},
"devDependencies": {
"#types/angular": "1.6.51",
"#types/angular-loading-bar": "0.0.35",
"#types/chai": "4.1.7",
"#types/core-js": "2.5.0",
"#types/jquery": "3.3.29",
"#types/kendo-ui": "2019.1.1",
"#types/mocha": "5.2.6",
"#types/node": "10.12.0",
"#types/underscore": "1.8.13",
"#types/webpack-env": "1.13.6",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"acorn": "6.1.1",
"awesome-typescript-loader": "5.2.1",
"chai": "4.2.0",
"check-node-version": "3.2.0",
"css-loader": "1.0.0",
"eslint": "5.16.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-loader": "2.1.2",
"eslint-plugin-import": "2.16.0",
"extract-text-webpack-plugin": "v4.0.0-beta.0",
"file-loader": "2.0.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"ignore-styles": "5.0.1",
"istanbul-instrumenter-loader": "3.0.1",
"jsdom": "14.0.0",
"jsdom-global": "3.0.2",
"mocha": "6.1.2",
"ng-annotate-loader": "0.6.1",
"node-sass": "4.11.0",
"rimraf": "2.6.2",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"ts-node": "8.0.3",
"typescript": "3.4.2",
"uglifyjs-webpack-plugin": "2.0.1",
"webpack": "4.23.1",
"webpack-cli": "3.1.2",
"webpack-merge": "4.1.4"
},
"dependencies": {
"angular": "1.7.5",
"core-js": "3.0.1",
"growl": "1.10.5",
"jquery": "3.3.1",
"underscore": "1.9.1"
}
}
I cannot share the source code, but I used this angularjs webpack starter project to start mine.

Issues with invalid sourcemaps in Webpack and terser-webpack-plugin are addressed starting with webpack 4.39.2 and terser-webpack-plugin 1.4.0.
v4.39.0 release log:
webpack-sources + terser-webpack-plugin comes with quality optimizations for SourceMaps
There was an additional issue, whose fix was published later. It was included for webpack-sources v1.4.2/webpack 4.39.2. In conclusion 4.39.2or latest version is the one to go.
Details
Sourcemaps in production mode seem to work as expected in most cases now. Unfortunately, if you have non trivial code transformations like inlining of functions (that exist in source code, but are dissolved from webpack) in the course of uglyfying/minification/optimization, breakpoints sometimes still don't get mapped well. Part of the reason is, that the sourcemap spec is vague concerning those aspects.

Webpack 4 configuring entry points and outputs (dist folder generated in each project folder)

The case is to have main folder 'Projects' and installed there all webpack 4 files with configs. Inside the 'Projects' folder are many folders like 'Project1', 'Project2', etc...I want to start from 'node_modules' entry point where webpack.config.js is and customize there further entry points like ./Project1/js/app.jsx, outputs like ./Project1/dist/js/main.js, same with scss and index.html, all generated in 'dist' folder. The thing is to have always only once installed node_modules in main 'Projects' folder.
the package.json:
{
"name": "webpack4_example",
"version": "1.0.0",
"main": "index.js",
"browserslist": ["last 2 versions"],
"scripts": {
"build": "webpack --mode production",
"watch": "webpack --watch --mode development",
"start": "webpack-dev-server --open --mode development"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"sass-loader": "^7.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
}
}
webpack.config.js:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './Project1/js/app.jsx', // customized entry point
output: {
path: path.resolve(__dirname, 'dist'),
filename: './js/out.js' // generated ./Project1/dist/js/out.js
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
},
{
test: /\.(png|jpe?g)/i,
use: [
{
loader: 'url-loader',
options: {
name: './img/[name].[ext]',
limit: 10000
}
},
{
loader: 'img-loader'
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './Project1/index.html', // not sure how to set these sections
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
};
.babelrc:
{
"presets": ["env", "react", "stage-2"]
}
From what I understand without customized entry points webpack as default will search for 'Projects/src/...' for all files like scss, js, img, index.html, index.js to operate on them and will generate the 'Projects/dist' folder with all files generated.
The configuration form above compiles without errors but doesn't generate the 'dist' folder anywhere so I'm not sure the compile process is done properly anyway.
Would appreciate any suggestions and solutions

SOLUTION (updated: added working watching files):
ok, I've managed to get it work (starting point is where node_modules and other webpack4 config files are installed, here in Projects main folder)
Projects
|__Project1
| |__js
| | |__app.jsx
| |__dist //desirable result, generated dist folder
| | |__* //all generated folders/files html, js, css, img
| |__index.ejs //renamed from index.html
|
|__Project2 //etc, project folders
|
|__src // if without customized entry points it's default source
| |__folders like /_scss, /img, /js
| |__index.js
| |__index.ejs //renamed index.html, used when no customized
| //entry points are set, same as for all /src
|
|__node_modules
|__.babelrc
|__package.json
|__webpack.config.js
.babelrc
unchanged and same as above in previous post
in this example in Projects folder normally is created src folder with all files/folders to pass thru webpack4, in /src/index.js file must be present, it's for importing some other files
example of index.js
import style from "./_scss/main.scss"; //paths for Projects/src/...
import style from "./main.css";
package.json
{
"name": "webpack4_example",
"version": "1.0.0",
"main": "index.js", // the file explained just above
"browserslist": ["last 2 versions"],
"scripts": {
"dev": "webpack --mode development ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
"build": "webpack --mode production ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
"watch": "webpack --watch --mode development",
"start": "webpack-dev-server --mode development --open --watch-content-base ./Project1/js/app.jsx" //watching desired files changes live in browser
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"sass-loader": "^7.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
}
}
where --mode production | developement | none means formatting optimizations for the output files in dist folder or none of such optimizations, for readibility use none
webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(js$|jsx$)/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
},
{
test: /\.(png|jpe?g)/i,
use: [
{
loader: 'url-loader',
options: {
name: './img/[name].[ext]',
limit: 10000
}
},
{
loader: 'img-loader'
}
]
},
{
test: /\.(css$|scss$)/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './Project1/index.ejs', // entry point for html
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
],
watchOptions: { //added to make possible watch files
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000
}
};
the customized entry point for index.html where .html extension is changed to .ejs as for working around some issues caused between html-loader and html-webpack-plugin. With .ejs the output html, also placed in dist folder automatically, isn't optimized with formatting and is readible. Watch out if html.ejs contains tag with pinned path for [out].js file (here the one generated in dist folder). The generated index.html from dist folder will add another such line so it will be doubled -> line to delete.
for run use: npm run build, npm start

Correct way to use minimize javascript in webpack.config.js

I'm following a tutorial about webpack, but it seems that the tutorial is making use of an older version of webpack. I'm trying to minimize the .js files but every time I run npm run webpack I get this error message in the console:
webpack.optimize.UglifyJsPlugin has been removed, please use
config.optimization.minimize instead.
How do I use that config.optimization.minimize ? I've been googling for some time but with no success... What do I need to change in my webpack.config.js?
This is my webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('allstyles.css');
module.exports = {
entry: './wwwroot/source/app.js',
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js'
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new webpack.optimize.UglifyJsPlugin()
],
module: {
rules: [
{test: /\.css$/, use: extractCSS.extract(['css-loader?minimize'])},
{test: /\.js$/,//
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
};
package.json:
{
"name": "WebpackBlogExample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-env": "^1.6.1",
"bootstrap": "^4.0.0-beta.2",
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^3.0.2",
"jquery": "^3.3.1",
"popper.js": "^1.12.9",
"style-loader": "^0.20.2",
"uglifyjs-webpack-plugin": "^1.2.2",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}

https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
If you look at the url it will explain all optimization options.
By default in dev mode webpack 4 won't minimize js, this is to speed up development. As soon as you switch mode to production or use the -p while running webpack it will automatically minimize your JS there is no need for uglifyjs setup anymore in webpack 4.

Webpack 4.X and minifying JS
UglifyJSPlugin:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: { ... }
})
]
}
Other options:
Note that while the UglifyJSPlugin is a great place to start for minification, there are other options out there. Here are a few more popular ones:
[BabelMinifyWebpackPlugin][1]
[ClosureCompilerPlugin][1]
If you decide to try another, just make sure your new choice also drops dead code as described in the tree shaking guide.
source: https://webpack.js.org/guides/production/
Look at:
https://stackoverflow.com/a/49767690/6200607

webpack not generating bundle.js

I am making a web app use react and php and i am using webpack for es6 to js so i generated files but i have a problem about webpack output bundle.js file.
this is my webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: [
'./src/index.jsx'
],
output: {
path: '/dist',
publicPath: '/dist/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
}, {
test: /(\.css|.scss)$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
};
this is my package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --history-api-fallback --progress --colors --config ./webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.18",
"css-loader": "^0.28.9",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.7.2",
"react-hot-loader": "^3.1.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"bootstrap": "^4.0.0",
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"reactstrap": "^5.0.0-beta"
}
}
why webpack generate and give me a bundle.js into the dist folder ? only saves it to the memory and show it on the localhost. i want use this react app with php but i can not handle to bundle.js.
Where is the problem and why the webpack did not generate the js file.
please help me

Your webpack configuration output filed got problem.
import const path = require('path') first in webpack.config.js and change output filed as below:
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'bundle.js'
}
And add following script into your package.json in script filed
"build": "webpack -p --progress"
Run npm run build

This is the expected behaviour for webpack dev server. If you wish to generate the output on disk, you need to run webpack, e.g:
"scripts": {
"start": "webpack-dev-server --history-api-fallback ...",
"build": "webpack"
}
then run npm build. For production, you should also set NODE_ENV=production, for example using cross-env:
"build": "cross-env NODE_ENV=production webpack"