webpack打包出现报错问题

19-12-04 在完成vue项目功能实现后，输入npm run build 命令打包工程代码。出现以下报错信息

错误图片

问题来源

  • ERROR in js/vendor.xxxxxxxxxxxx.js from UglifyJs
    Invalid assignment [./node_modules/muse-ui/dist/muse-ui.esm.js:7470,0][js/vendor.a5b3634188e11860836a.js:83589,39]
  • 当前webpack使用版本3.6.0
  • 面向百度的问题来源解释是项目中编写使用了es6代码，在打包时uglifyjs转换出现问题
  • 错误信息第二行显示是muse-ui部分js代码无效赋值，应该说的就是muse-ui部分js没转化成功

解决办法

  • 查看项目依赖包有几个是否缺失（package.json中）
  1. babel-loader babel-core babel-preset-es2015
  2. 没有的话npm i xxxxx -D都下载好
  • 修改几个配置文件

  1. 在.babelrc文件中确认修改成标红代码


    .babelrc修改内容

  2. 在webpack.config.js 文件中确认修改成标红代码


    webpack.config.js修改内容

注意第一个红框要写，第二个红框不确定要不要写，写上吧没错。第三个红框中括号内第三个resolve中‘/node_modules/xxxxx'你错误信息哪个文件出错这里xxxx就改成啥

***** 以上基于小白不懂webpack原理百度试出来的解决办法，日后理解了再来填坑。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容