使用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就不报错了,可以直接打包了

原文地址:https://www.cnblogs.com/shizk/p/10601533.html