I am learning react, and the online course I am following uses webpack. I didn't add any minifying or uglyfying options to my webpack.config but still my bundle.js is minified. I am not sure why or how to turn it off. I have attached my webpack.config.js and package.json. Thanks for your help.
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true
}
};
{
"name": "expensify",
"version": "1.0.0",
"description": "learn react",
"main": "index.js",
"author": "powpowpow",
"license": "MIT",
"scripts": {
"serve": "live-server public",
"build": "webpack",
"dev-server": "webpack-dev-server"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"live-server": "^1.2.0",
"node-sass": "^4.8.3",
"normalize.css": "^8.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-modal": "^3.3.2",
"react-router-dom": "^4.2.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
}
}
As you are using webpack 4
One of the ways is :
Inside package.json set scripts
to either development
or production
mode
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
And now when you run npm run dev
it will give you bundle.js
but not minified.
But when you run npm run build
it will give you a minified bundle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With