3

I have 2 files app.js & math.js

It contains the following code -

app.js

import { sum } from "./math";

console.log("");

console.log(sum(2, 3));

math.js

export const sum = (a, b) => a + b;
export const multiply = (m, n) => m * n;

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const config = {
    entry: "./app.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    plugins: [
        new UglifyJsPlugin()
        // new webpack.optimize.UglifyJsPlugin() doesn't work
    ]
};

module.exports = config;

The complete code is available at https://github.com/deadcoder0904/webpack-treeshake

The problem is UglifyJsPlugin works but webpack.optimize.UglifyJsPlugin() doesn't work

My webpack version is v3.11.0

deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
  • Please read the docs: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/ – str Feb 15 '18 at 11:37
  • I already did & tried it thats why asking. My version is 3.11.0 whereas in the top it says webpack =< 3.0.0. – deadcoder0904 Feb 15 '18 at 11:37
  • What exactly did you try about "webpack =< v3.0.0 currently contains v0.4.6 of this plugin under webpack.optimize.UglifyJsPlugin as an alias. For usage of the latest version (v1.0.0), please follow the instructions below." ? – str Feb 15 '18 at 11:39
  • I don't get it. I am using version 3.11.0 which is greater than 3.0.0. Ohh sorry read it again. Is it for v4.0.0? – deadcoder0904 Feb 15 '18 at 11:41
  • Not sure what you mean by "Is it for v4.0.0". But `webpack.optimize.UglifyJsPlugin` and `UglifyJsPlugin` do not refer to the same version. – str Feb 15 '18 at 11:42
  • I was talking about Webpack v4.0.0. Yeah, its different versions but I guess Uglify supported TreeShaking. Now I tried webpack@next i.e. v4.0.0-beta-1 & it giving error 'Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.' – deadcoder0904 Feb 15 '18 at 11:46
  • Ok so I got the answer. Thanks for helping out. I'll post it now so it helps someone. – deadcoder0904 Feb 15 '18 at 11:49

1 Answers1

1

Posting answer to my own question. Thanks @str for helping out.

I was using different versions of Uglify JS, not sure if that was the problem.

So I tried installing webpack version 4 which is now in beta so I had to do install webpack@next. Also, webpack-cli is now its own package so I had to install it too. Earlier, it was bundled with webpack itself.

After installing both webpack@next & webpack-cli, I changed my webpack.config,js to look like -

webpack.config,js

const path = require("path");
const webpack = require("webpack");

const config = {
    entry: "./app.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }
};

module.exports = config;

And ran the following to generate bundle with TreeShaking

webpack --optimize-minimize --mode production

The complete code is available at https://github.com/deadcoder0904/webpack-treeshake

Checkout my other answer to TreeShake with Lodash which does all the treeshaking

deadcoder0904
  • 7,232
  • 12
  • 66
  • 163