uglify not working

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

Author: Fantashit

3 thoughts on “uglify not working

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

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

  2. 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",
  3. 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;

Comments are closed.