使用iview-project 打包build報錯，ERROR in xxxxx.cheunk.js from UglifyJs

1、iview-project  爲iview官方推薦工程，一個基於iview的vue腳手架

　　github網址：https://github.com/iview/iview-project

   廢話很少說，直接進入主題

 

2、build報錯及緣由

  一、報錯

   大部分報錯內容  ERROR in xxxxx.cheunk.js from UglifyJs

 

二、緣由：iview中使用了es6語法，然而uglifyJs是不支持的，爲何不支持？咱們看下webpack的版本

 

iview-project  最大的坑就在這裏，如今webpack版本都4+了，可是工程裏用的webpack2，不支持es6語法，不支持那就配置一下

 

3、解決：

一、在webpack.base.conf.js中   修改js編譯代碼

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [path.resolve('src'),path.resolve('/node_modules/iview/src'),path.resolve('/node_modules/iview/packages')]
},

 

讓iview的es6語法通過babel來轉換

二、webpack.prod.conf.js中  註釋原來的   new webpack.optimize.UglifyJsPlugin({....})   

下載  uglifyjs-webpack-plugin  插件

npm install   uglifyjs-webpack-plugin --save-dev

下載後引入   

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

添加以下配置：

 new UglifyJsPlugin({
            // 使用外部引入的新版本的js壓縮工具
                parallel: true,
            uglifyOptions: {
                ie8: false,
                ecma: 6,
                warnings: false,
                mangle: true, // debug false
                output: {
                    comments: false,
                    beautify: false, // debug true
                },
                compress: {
                    // 在UglifyJs刪除沒有用到的代碼時不輸出警告
                    warnings: false,
                    // 刪除全部的 `console` 語句
                    // 還能夠兼容ie瀏覽器
                    drop_console: true,
                    // 內嵌定義了可是隻用到一次的變量
                    collapse_vars: true,
                    // 提取出出現屢次可是沒有定義成變量去引用的靜態值
                    reduce_vars: true,
                }
            }
        }),

 

好了，這樣build就不報錯了，能夠直接打包了