ne peut pas faire fonctionner webpack avec uglify

Question

J'utilise webpack et ça marchait jusqu'à il y a quelques jours.

sur npm run build je reçois une erreur npm run dev et npm run watch beau travail.

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

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

J'utilise la configuration webpack suivante:

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 
}; 

`` ` plein paquet peut être trouvé ici:

https://github.com/sunnysideup/silverstripe-sswebpack_engine_only Je veux être en mesure d'exécuter npm run build sans erreurs

Mon environnement:

version de noeud: 8.0.0

version NPM: 5.5.1

ubuntu 16.04

cms: silverstripe

Answer 1

Si vous êtes explicit annonce ding le UglifyJSPlugin(), votre utilisation de l'indicateur -p est redondante, et est probablement à l'origine d'un conflit où la survenue se produit avant que l'ES6 ne transpire (comme l'indique votre erreur).

Solution probable: Il suffit d'utiliser NODE_ENV=production webpack. Vous êtes en train de détecter la variable d'environnement production dans votre configuration et de la gérer comme vous le souhaitez déjà. Laisser webpack faire sa propre production en plus de cela est probablement en train de trébucher.

Answer 2

Alors que l'oncle fromage fourni la moitié de la réponse, voici l'autre moitié:

webpack.config.babel.js, un changement de: ...

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

à

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

plugins.push(
    new UglifyJSPlugin(), 
); 

le corrige ... OUI - merci!

Voici ce que je l'utilise maintenant package.json:

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