javascript - ERROR in build.js from UglifyJs Unexpected token: punc (() - Stack Overflow

admin管理员组

文章数量:1324817

I have developed an application on my local. The client and server run on different ports. The application runs fine on my local system. I have now pushed the code onto the server. When I try running the code using npm run build.

I get an error that looks like this

My urlMixin.js looks like this

let path = require('path');

let webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
},
module: {
    rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {}
                // other vue-loader options go here
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }
    ]
},
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json']
},

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000'
        }
    },
    historyApiFallback: true,
    noInfo: true
},
performance: {
    hints: false
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
     module.exports.devtool = '#source-map'
    // .html
module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: '"production"'
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        press: {
            warnings: false
        }
    }),
    new webpack.LoaderOptionsPlugin({
        minimize: true
    })
])
}

I have developed an application on my local. The client and server run on different ports. The application runs fine on my local system. I have now pushed the code onto the server. When I try running the code using npm run build.

I get an error that looks like this

My urlMixin.js looks like this

let path = require('path');

let webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
},
module: {
    rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {}
                // other vue-loader options go here
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }
    ]
},
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json']
},

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000'
        }
    },
    historyApiFallback: true,
    noInfo: true
},
performance: {
    hints: false
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
     module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: '"production"'
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        press: {
            warnings: false
        }
    }),
    new webpack.LoaderOptionsPlugin({
        minimize: true
    })
])
}

Is there something wrong with my webpack? What wrong am I doing? Can someone please help me out?

• javascript
• node.js
• webpack
• vue.js
• babeljs

Share Improve this question Follow asked May 4, 2018 at 23:18 CoderPJCoderPJ 1,01166 gold badges2020 silver badges4444 bronze badges 2

• Similar: stackoverflow./questions/43598037/… – CertainPerformance Commented May 4, 2018 at 23:20
• Also similar: https://stackoverflow./questions/42375468/uglify-syntaxerror-unexpected-token-punc. And it looks like the most upvoted answer probably has what you're looking for – Ohgodwhy Commented May 5, 2018 at 3:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

A change from

  new webpack.optimize.UglifyJsPlugin()

to

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
[...]

  new UglifyJSPlugin()

with npm install --save uglifyjs-webpack-plugin fixes it. https://github./webpack/webpack/issues/5858#issuement-338430720

I think you need to add the presets option in the js rule section of your webpack.config. Below is a sample snippet for js rule:

{
  test: /\.m?js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  },
  exclude: [/node_modules/]                                                           
}

This error in UglifyJs plugin mostly happens when the file is in es6 or newer versions. I think UglifyJs plugin is not working on js versions newer than es5 and we need presets to add required plugins to transpile it to older versions.

本文标签： javascriptERROR in buildjs from UglifyJs Unexpected token punc (()Stack Overflow