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

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

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

   廢話不多說，直接進入主題

 

二、build報錯及原因

  1、報錯

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

 

2、原因：iview中使用了es6語法，然而uglifyJs是不支持的，為什么不支持？我們看下webpack的版本

 

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

 

三、解決：

1、在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來轉換

2、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就不報錯了，可以直接打包了