uglifyjs-webpack-plugin cannot uglify any file

[saysmy]

this is my code:

new UglifyJsPlugin({
    uglifyOptions: {
         ie8: false,
	 ecma: 8,
	 //parse: {...options},
	 mangle: {
		 properties: {
		          // mangle property options
		  }
	  },
	 output: {
		   comments: false,
		   beautify: false
	  },
	 compress: {
	  },
	 warnings: false
    }
 })

I used es7, es6, if i use webpack.optimize.UglifyJsPlugin , it can work normally.

"uglifyjs-webpack-plugin": "^1.1.8",   
 "webpack": "^3.10.0"

[alexander-akait]

@saysmy can you create minimum reproducible test repo?

[kzc]

You definitely don't want to mangle properties unless you know what you're doing. Unless the source code adheres to very strict property usage rules it almost certainly will break.

Recommend that you just use the default options:

new UglifyJsPlugin()

[saysmy]

@ericclemmons https://github.com/saysmy/UglifyJsPluginTest this is my demo address. It cannot compress my js file.

[saysmy]

@kzc I tried this method, but it didn't work.

webpack.config.js:

// 引入操作路径模块和webpack 
var path = require('path');
var webpack = require('webpack');

//webpack配置
var postcssConfigDir = './webpack-config/postcss.config.js';
var resolveConfigDir = './webpack-config/resolve.config.js';


//触屏目录配置
var entryDir = './static/dist/**/*.js';

var dll_manifest_name = 'dll';
var vendor_manifest_name = 'vendor';

var entries;
entries = ['common'];

module.exports = {
    /* 输入文件 */
	resolve: require( resolveConfigDir ),
	entry: {
		vendor: entries
	},
	output: {
		path: path.resolve(__dirname, './static/dist'),
		filename: 'js/[name].js?v=[chunkhash:8]',
		library: '[name]_library',
		/*libraryTarget: 'umd'*/
	},
	module: {
		rules: [
			{
				test: /\.ejs$/,
				loader: 'ejs-loader'
			},
			{
				test: /\.js$/,
				enforce: 'pre',
				loader: 'eslint-loader',
				include: path.resolve(__dirname, entryDir),
				options: {
					fix: true
				}
			},
			{
				test: /\.js$/,
				loader: 'babel-loader?cacheDirectory=true',
        		exclude: ['node_modules']
			}
		]
	},
	plugins: [
	    
	]
};

console.log('success')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports.plugins = module.exports.plugins.concat([

	new UglifyJsPlugin({
	    uglifyOptions: {
	      output: {
	        comments: false,
	        beautify: false,
	      },
	      compress: true,
	      warnings: false
	    }
	})
]);

package.json:

{
  "name": "vue2webpack3",
  "version": "1.0.0",
  "description": "vue2.0 + webpack3.x",
  "main": "webpack-vendor.config.js",
  "scripts": {
    "vendor": "set NODE_ENV=production&&webpack --progress --colors --config ./webpack-vendor.config.js",
    "vendor-dev": "webpack --progress --colors --config ./webpack-vendor.config.js"
  },
  "keywords": [],
  "author": "smy",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "axios": "^0.15.3",
    "babel-core": "^6.24.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.27.3",
    "ejs-loader": "^0.3.0",
    "es6-promise": "^4.1.0",
    "eslint": "^3.18.0",
    "eslint-loader": "^1.7.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "fs": "^0.0.1-security",
    "glob": "^7.1.1",
    "less": "^2.7.2",
    "postcss-loader": "^1.3.3",
    "webpack-zepto": "^0.0.1",
    "weixin-js-sdk": "^1.2.0"
  },
  "dependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "happypack": "^4.0.1",
    "html-webpack-include-assets-plugin": "^1.0.2",
    "jquery": "^3.2.1",
    "promise-polyfill": "^6.1.0",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "webpack": "^3.10.0"
  },
  "browserslist": [
    "> 0.2%",
    "last 5 versions",
    "ie 7",
    "Firefox < 20"
  ]
}

[alexander-akait]

@saysmy already investigate

[alexander-akait]

Hook optimize-chunk-assets not fire, investigate

[alexander-akait]

@saysmy problem in filename: 'js/[name].js?v=[chunkhash:8]' => filename: 'js/[name]-[chunkhash:8].js' or just filename: 'js/[name].js' don't use query params in this option. Use https://github.com/jantimon/html-webpack-plugin for html with hash option or write manifest file to disk and load files from this file in backend. Thanks for issue. If you wan't to use query params please open issue in webpack/enhanced-resolve to discussion.

[saysmy]

@evilebottnawi Thank you very much! so perfect, it works!

[levani]

@evilebottnawi What about lazy loaded chunks? When using the following config:

output: {
  ...
  chunkFilename: '[name].js?ver=[chunkhash]',
}

and load some chunks like this:

import(/* webpackChunkName: "something" */ '../modules/something').then(module => {
  module.default();
});

the inserted file is .../something.js?ver=2f5ede5b12e72253befb but it is not minified. uglifyjs-webpack-plugin does not work. We can't make this work using html-webpack-plugin or manifest file, can we?

[alexander-akait]

@levani can you create minimum reproducible test repo?

[levani]

@evilebottnawi
I believe this must be it https://github.com/levani/webpack-uglify-test

run npm run build and check /bundles/i-am-lazy.js. Then uncomment line 13 in webpack.config.js, rebuild and check the file again. I first case it must be unminified and in second case it must be minified.

[alexander-akait]

@levani expected behavior, output.chunkFilename should be filename, not URL, i don't know why webpack don't throw error, i will raise this issue (or maybe it is normal).

Why it is happens:

1. We minify only .js files https://github.com/webpack-contrib/uglifyjs-webpack-plugin/blob/master/src/index.js#L23.
2. Using chunkFilename: '[name].bundle.js?ver=[chunkhash]' output:

[ 'i-am-lazy.bundle.js?ver=eb91bf09872882d2eabc' ]
[ 'main.js' ]

3. Bundle i-am-lazy.bundle.js?ver=eb91bf09872882d2eabc filters here https://github.com/webpack-contrib/uglifyjs-webpack-plugin/blob/master/src/index.js#L108 because we use regex /\.js$/i.

Solution: just change regex to allow query params test: /.(js?)(\?[a-z0-9]+)?$/,.

I think it is bug if webpack allow using query params in filename/chunkFilename and etc

[alexander-akait]

From slack:

sokra [5:55 PM]
Yes it can. But I won't recommend it for web apps
You should keep old assets around when updating your app, but make it impossible

I will fix it

[alexander-akait]

Done in #251

[michael-ciniawsky]

Released in v1.2.3 🎉