Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

uglify not working #5858

Closed
sunnysideup opened this issue Oct 20, 2017 · 8 comments

Comments

@sunnysideup
Copy link

commented Oct 20, 2017

Hi,

Can you have a look at this issue:

https://stackoverflow.com/questions/46807761/can-not-make-webpack-work-with-uglify/

on npm run build I get an error npm run dev and npm run watch work fine.


ERROR in bundle.js from UglifyJs
Unexpected token: punc (() [bundle.js:20892,36]

I use the following webpack setup:

package.json:

{
  "name": "ss-webpack",
  "version": "1.0.0",
  "description": "A silverstripe theme setup using webpack to bundle assets and provide a front end build system. ",
  "main": "index.js",
  "scripts": {
    "watch": "NODE_ENV=development webpack-dashboard -- webpack-dev-server",
    "dev": "NODE_ENV=development webpack",
    "build": "NODE_ENV=production webpack -p --progress"
  },
  "author": "Sunny Side Up",
  "license": "tba",
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel": "^6.23.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.24.1",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "eslint": "^4.8.0",
    "eslint-loader": "^1.9.0",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^0.11.2",
    "image-webpack-loader": "^3.4.2",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "normalize.css": "^7.0.0",
    "postcss": "^6.0.13",
    "postcss-loader": "^2.0.6",
    "postcss-reporter": "^4.0.0",
    "postcss-scss": "^1.0.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "stylelint": "^7.13.0",
    "svg-inline-loader": "^0.7.1",
    "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",
    "url-loader": "^0.5.9",
    "webpack": "^3.6.0",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-notifier": "^1.5.0"
  },
  "dependencies": {
    "exports-loader": "^0.6.4",
    "script-loader": "^0.7.2"
  }
}

webpack.config.babel.js:

/*
 Webpack Config!
 Original version: Andrew Haine
*/

/*
    Imports
*/

import webpack from 'webpack';
import path from 'path';
import DashboardPlugin from 'webpack-dashboard/plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import variables from './../webpack-variables';

/*
    Useful constants
*/

const SITE_NAME = variables.devWebAddress;
const THEME_NAME = variables.themeName;
const DISTRIBUTION_FOLDER = variables.distributionFolder;

/*
    Plugin configuration
*/

//different css points
const extractEditor = new ExtractTextPlugin({
    filename: 'editor.css',
});
const extractMain = new ExtractTextPlugin({
    filename: 'style.css',
});

//define plugins
let plugins = [];

const IS_PROD = process.env.NODE_ENV === 'production';

if(IS_PROD) {
    plugins.push(
        new webpack.optimize.UglifyJsPlugin(),
        extractEditor,
        extractMain
    );


//development
} else {
    plugins.push(
        //auto updating on dev server
        new webpack.HotModuleReplacementPlugin(),
        //shows relative path in HotModuleReplacement
        new webpack.NamedModulesPlugin(),
        //sexy dashboard
        new DashboardPlugin(),
        extractEditor
    );
}

plugins.push(new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
}))

const sources = [
    `../${THEME_NAME}/src`,
    `../${THEME_NAME}_mysite/src`
];

const sassFolders = sources.map((source) => path.resolve(source, "scss"))
    .concat(sources.map((source) => path.resolve(source, "sass")));

//HMR can be fixed by using basic loaders instead of textExtract
const sassLoaderExtract =    {
    fallback: 'style-loader',
    use: [
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: true
            }
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: true
            }
        },
    ]
}

const styleLoaders = [{
    //basic css
    test: /\.css/i,
    use: ['style-loader', 'css-loader']
}, {
    //main styles
    test: /[^editor].\.s(a|c)ss$/i,
    include: sassFolders,
    use: extractMain.extract(sassLoaderExtract)
}, {
    //styles for editor
    test: /editor\.s(a|c)ss/i,
    include: sassFolders,
    use: extractEditor.extract(sassLoaderExtract)
}];

var jsLoaders = [
    // KEEP THE CODE BELOW AND TURN ON IF NEEDED....
    // {
    //     //eslint check
    //     enforce: 'pre',
    //     test: /\.js$/i,
    //     exclude: /node_modules/,
    //     use: {
    //         loader: 'eslint-loader'
    //     }
    // },
    {
        //js compilation
        test: /\.js$/i,
        include: sources.map((source) => path.resolve(source, "src")),
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true,
                presets: [require.resolve("babel-preset-es2015")]
            }
        }
    }
];

if(IS_PROD) {

    jsLoaders.push(
        {
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            },{
                loader: 'expose-loader',
                options: '$'
            }]
        }
    );
}

const imageLoaders = [
    {
        test: /\.(png|jpg|gif)$/i,
        use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 30000
                }
            },
            {
                loader: 'image-webpack-loader',
                options: {
                    optipng: {
                        optimizationLevel: 5
                    },
                    mozjpeg: {
                        interlaced: true,
                    }
                }
            }
        ]
    },
    {
        test: /\.svg$/i,
        use: 'svg-inline-loader'
    }
];

/*
    Main Config Object
*/
export default {
    //what files to start from
    //bundle should include main.js from all sources
    entry: path.resolve(`../${THEME_NAME}_mysite/src`, "main.js"),
    //access from client
    output: {
        path: path.resolve(`../${DISTRIBUTION_FOLDER}/`, ''),
        publicPath: `/themes/${DISTRIBUTION_FOLDER}/`,
        filename: 'bundle.js'
    },
    //loaders
    module: {
        rules: styleLoaders.concat(jsLoaders).concat(imageLoaders)
    },
    //extra settings
    resolve: {
        modules: [
            path.join(__dirname, "node_modules"),
            path.resolve(`../${THEME_NAME}_node_modules/node_modules`),
            path.resolve(`../${THEME_NAME}_mysite/node_modules/`)
        ],
        alias: {
            site: path.resolve(`./../../`),
            base: path.resolve(`../${THEME_NAME}/src/`),
            mysite: path.resolve(`../${THEME_NAME}_mysite/src/`),
            'jquery': 'jquery/dist/jquery',
            'jQuery': 'jquery/dist/jquery'
        },
        extensions: [".js", ".jsx"]
    },
    devServer: {
        disableHostCheck: true,
        host: '0.0.0.0',
        hot: true,
        port: 3000,
        publicPath: `/themes/${DISTRIBUTION_FOLDER}/`,
        proxy: {
            '/': {
                'target': {
                    'host': `${SITE_NAME}`,
                    'protocol': 'http',
                    'port': 80
                },
                changeOrigin: true,
                secure: false
            }
        },
        stats: 'errors-only'
    },
    plugins: plugins
};

the full package can be found here:

https://github.com/sunnysideup/silverstripe-sswebpack_engine_only I want to be able to run npm run build without errors

My environment:

node version: 8.0.0

npm version: 5.5.1

ubuntu 16.04

cms: silverstripe

@sokra

This comment has been minimized.

Copy link
Member

commented Oct 20, 2017

Unexpected token: punc (() [bundle.js:20892,36]

Instead of -p use the latest version of the uglifyjs-webpack-plugin, which support ES2015.

@sokra sokra closed this Oct 20, 2017

@sunnysideup

This comment has been minimized.

Copy link
Author

commented Oct 21, 2017

Hi,

Here are some notes that may be of interest....

A change from

    plugins.push(
        new webpack.optimize.UglifyJsPlugin(),
    );

to


const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
...
    plugins.push(
        new UglifyJSPlugin(),
    );

fixes it... YES - thank you !

Here is the package.json line:

    "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
@davecranwell-adestra

This comment has been minimized.

Copy link

commented Mar 21, 2018

Please can the note about not using -p be added to the Readme? Bootstrap frameworks and webpack example projects all over the net appear to use -p. The fact that using it in conjunction with uglifyjs-webpack-plugin will always cause an error would warrant a more public note about it, imo.

@ooflorent

This comment has been minimized.

Copy link
Member

commented Mar 21, 2018

@davecranwell-adestra This issue is no longer relevant with webpack 4.

@shivkoirala

This comment has been minimized.

Copy link

commented Mar 27, 2018

I have webpack 4.2.0 / ES 5 / TS 2.7.2 and damn simple webpack.config file which has plugin uglify added. Bundling happens but Uglify does not.
Tried all scenarios webpack -p , webpack - mode production , set the node environment variable. What am i doing wrong. When i run uglify standalone it compresses the file.

module.exports = {
    entry: {
        CustomerModule: "./Modules/CustomerModule.ts",
        SupplierModule: "./Modules/SupplierModule.ts",
        Startup: ["./node_modules/core-js/client/shim.min.js",
            "./node_modules/zone.js/dist/zone.js",
            "./node_modules/reflect-metadata/Reflect.js",
            "./Startup.ts"
        ]
    },
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/dist/",
        filename: "[name].bundle.js"
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: ["awesome-typescript-loader", "angular-router-loader"]
                }
            ]
    }
    , plugins: [new UglifyJSPlugin()]
};

@cklmercer

This comment has been minimized.

Copy link

commented Apr 9, 2018

@shivkoirala IIRC this plugin is no longer required as of webpack v4.

@JabbyPanda

This comment has been minimized.

Copy link

commented Jun 7, 2018

If you are using webpack <4.0.0, you need to update UglifyJS to 1.x version by yourself by running in order to fix it as discussed at https://github.com/webpack-contrib/uglifyjs-webpack-plugin#uglifyjs-webpack-plugin

npm i -D uglifyjs-webpack-plugin
@ReeganExE

This comment has been minimized.

Copy link

commented Sep 23, 2018

From 2018-09-14, uglifyjs-webpack-plugin switches back to uglify-js instead of uglify-es. If you need uglify ES6 code please use terser-webpack-plugin.

See the CHANGELOG

Sample webpack 4 configuration:

const TerserPlugin = require('terser-webpack-plugin');

const options = {
  mode: env.NODE_ENV,
  // ...
  optimization: optimization()
};

function optimization() {
  if (process.env.NODE_ENV !== 'production') {
    return;
  }

  return {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: 6,
          compress: true,
          output: {
            comments: false,
            beautify: false
          }
        }
      })
    ]
  };
}

module.exports = options;

cooperka added a commit to cooperka/react-static that referenced this issue Oct 22, 2018

Use updated UglifyJsPlugin for webpack v4
Fixes `Unexpected token: punc ())` errors during build

See discussions for details:
webpack-contrib/uglifyjs-webpack-plugin#104 (comment)
webpack/webpack#5858 (comment)

cooperka added a commit to cooperka/react-static that referenced this issue Oct 22, 2018

Use updated UglifyJsPlugin for webpack v4
Fixes `Unexpected token: punc ())` errors during build

See discussions for details:
webpack-contrib/uglifyjs-webpack-plugin#104 (comment)
webpack/webpack#5858 (comment)

cooperka added a commit to cooperka/react-static that referenced this issue Oct 22, 2018

Use updated UglifyJsPlugin
Fixes `Unexpected token: punc ())` errors during build

See discussions for details:
webpack-contrib/uglifyjs-webpack-plugin#104 (comment)
webpack/webpack#5858 (comment)

tannerlinsley added a commit to react-static/react-static that referenced this issue Oct 22, 2018

Use updated UglifyJsPlugin for create-react-app compatibility (#829)
* Commit yarn 1.10 'integrity' info

* Use updated UglifyJsPlugin

Fixes `Unexpected token: punc ())` errors during build

See discussions for details:
webpack-contrib/uglifyjs-webpack-plugin#104 (comment)
webpack/webpack#5858 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.