Currently, I am following a tutorial on webpack, but it appears that the tutorial is based on an older version of webpack. I am attempting to reduce the size of the .js files, however, every time I execute npm run webpack, I encounter the following error message in the console:
webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
Could someone guide me on how to implement config.optimization.minimize? I have been searching online for a solution without any luck. What changes should I make in my webpack.config.js file?
Below is my current 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": {}
}