解决webpack打包错误：Unexpected token: name (raf)

痛定思痛。 2022-01-14 12:57 640阅读 0赞

在使用webpack模板的vue-cli项目时，打包的时候会报错，错误内容如下：

ERROR in main.b05fb3748db2b4de34df.js from UglifyJs  
Unexpected token: name (raf) \[main.b05fb3748db2b4de34df.js:44619,4\]  
Child html-webpack-plugin for "..\\index.html":  
     1 asset  
npm ERR! code ELIFECYCLE  
npm ERR! errno 2  
npm ERR! iview-admin@ build: \`webpack --progress --hide-modules --config build/webpack.prod.config.js\`  
npm ERR! Exit status 2  
npm ERR!  
npm ERR! Failed at the iview-admin@ build script.  
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:  
npm ERR!     C:\\Users\\82506\\AppData\\Roaming\\npm-cache\\\_logs\\2019-06-06T12\_30\_59\_948Z-debug.log

通过错误信息大概可以了解到，报错来自 UglifyJs  这个插件引起的，出现上面的问题，首先会想到的webpack的压缩代码插件出问题了，项目中使用`uglifyjs-webpack-plugin`来压缩代码。

原来，**uglify-js在压缩代码时，遇到es6语法就不会压缩并且也会报错。**

后来通过跟换JS压缩插件解决了问题

使用插件：**BabiliPlugin**

安装插件

npm i babili-webpack-plugin

在webpack生产环境配置文件中使用

//webpack.prod.js
    
    const BabiliPlugin=require("babili-webpack-plugin");
    
    
    .
    .
    .
     new BabiliPlugin(),

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: /images/20220114/df2e7906bb95471caf636f7f19d51663.png