不能使webpack与uglify工作

我使用webpack，它在几天前工作得很好。不能使webpack与uglify工作

上npm run build我得到一个错误 npm run dev和 npm run watch 做工精细。

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]

我用下面的WebPack设置：

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

``` 全包可以在这里找到：

https://github.com/sunnysideup/silverstripe-sswebpack_engine_only 我希望能够无差错运行npm run build

我的环境：

节点版本：8.0.0

NPM版本：5.5.1

的Ubuntu 16.04

cms：silverstripe

来源

2017-10-18 Nicolaas Thiemen Francken

我仍然在寻找一个解决方案... –

你见过这样的：https://github.com/vue-bulma/datepicker/issues/45 –

感谢您分享@OlliTyynelä - 我不使用日期选择器，所以我不认为这是直接相关的。 –

如果您是明确的广告如果使用UglifyJSPlugin()，那么使用-p标志是多余的，并且可能会在ES6传输之前发生uglification时发生冲突（因为您的punc()错误指示）。

可能的解决方案：只需使用NODE_ENV=production webpack。您正在检测配置中的production环境变量，并按照您希望的方式处理它。让webpack在自己的生产版本上进行创建可能会让事情发生。

来源

2017-10-18 21:15:18 UncleCheese

谢谢大叔！我试过了，它部分工作。我现在只看到一次错误，而不是两次：两个错误中的第一个似乎已经解决了！我如何解决第二个问题？奇怪的是，这一切都在一周前进行。自从我们几次运行npm安装。我们应该看看上周在软件包方面的差异吗？ –

'rm -rf node_modules/&& npm install'总是一件好事。你可能有多个版本的UglifyJS。 – UncleCheese

虽然奶酪大叔提供一半的答案，这里是另一半：

webpack.config.babel.js，从变化： ...

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

到

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

plugins.push(
    new UglifyJSPlugin(), 
);

修复它...是的 - 谢谢！

这是我现在的package.json使用：

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

来源

2017-10-21 20:40:14

不能使webpack与uglify工作

回答

相关问题