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

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

---

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

尝试了下还是没用。难道babel没有对node_module下的模块下进行编译？

---

研究了下laravel-mix的源码

原来在webpack-rules.js中关于babel编译的rule中过滤了node_modules ，再去laravel官网查看自定义rule的方式：

在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配置带来便利，但还是有一定的门槛，对于我这种刚尝试用vue+webpack做项目的新手有一定的难度！