laravel-mix下webpack打包es6报错UglifyJs + Unexpected token punc 解决

项目中有块功能用Vue+laravel-mix方式,引入了第三方组件库element-ui(饿了么),dev方式可以正常编译,可等到生产环境(prod)时一直编译不通过。

《laravel-mix下webpack打包es6报错UglifyJs + Unexpected token punc 解决》

初步分析是由于element-ui组件库存在ES6代码,UglifyJs无法做压缩引起,百度下解决方式

《laravel-mix下webpack打包es6报错UglifyJs + Unexpected token punc 解决》
尝试了下还是没用。难道babel没有对node_module下的模块下进行编译?

研究了下laravel-mix的源码

《laravel-mix下webpack打包es6报错UglifyJs + Unexpected token punc 解决》
原来在webpack-rules.js中关于babel编译的rule中过滤了node_modules ,再去laravel官网查看自定义rule的方式:

《laravel-mix下webpack打包es6报错UglifyJs + Unexpected token punc 解决》

在package同级目录下的webpack.mix.js中加上这段:

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: /(node_modules\/element-ui)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: 'vue-app',
              plugins: [
                ["component", [
                  {
                    "libraryName": "element-ui",
                    "styleLibraryName": "theme-default"
                  }
                ]],"transform-vue-jsx"]
            }
          }
        ]
      },
    ]
  }
});

最后编译:
《laravel-mix下webpack打包es6报错UglifyJs + Unexpected token punc 解决》
《laravel-mix下webpack打包es6报错UglifyJs + Unexpected token punc 解决》

正如预期,报错不在出现,编译通过~!

总结: laravel-mix方式给webpack配置带来便利,但还是有一定的门槛,对于我这种刚尝试用vue+webpack做项目的新手有一定的难度!

    原文作者:max82645235
    原文地址: https://segmentfault.com/a/1190000011623080
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞