Webpack 在vue加载程序中配置Babel（Symfony Encore）

我正在使用Symfony Encore为我的项目配置一个网页包。到目前为止，我已经启用了

vue loader

，没有任何问题，但在将选项传递到

vue loader

时，我遇到了难题，因为文档不够清晰，无法传递或配置任何选项

我想知道是否有人试图这样做，如果，它是如何正确地完成

到目前为止，我只启用了

vue加载程序

const Encore = require('@symfony/webpack-encore');
const { VueLoaderPlugin } = require('vue-loader');

Encore
  // ...
  .enableVueLoader(function (options) {
    // I need to do something here to enable babel for ES5 target
  })
  .addPlugin(new VueLoaderPlugin()) // because of no support for version 15 yet
  .addEntry('vue/app', './assets/vue/app.js') 

---

首先，您可能不应该使用vue-loader@15.0+作为Encore（因此，您也不应该将

addPlugin（新的VueLoaderPlugin（））

行添加到Encore配置）

其次，您可以通过以下方式配置Babel：

保持原样。Encore为Babel提供了非常合理的默认设置（如果启用vue loader，则会自动配置）：

env

preset用于

>1%的目标浏览器覆盖率

:

（不太可取，因为它会与由Encore本身执行的Babel的内部配置冲突。如果您希望对vue文件进行独立配置，仍然可能有用）：

---

非常感谢你。我非常感谢您的建议，但是如果我们使用v14而不使用

addPlugin

，那会更好吗？它现在似乎工作得很好。v15比v14有了巨大的变化。Encore用于样式提取的ExtractTextPlugin不能很好地与v15配合使用，因此带有嵌入式样式的单文件组件存在一些问题（好吧，我可能在这方面错了）。可能不重要，如果对你有用就好了=）太好了！谢谢你的信息。。再一次，为了答案！

{
    presets: ['env']
}

.configureBabel(function(config) {
  config.presets.push('es2017');
})

.enableVueLoader(function(options) {
  options.loaders = {
    js: { loader: 'babel-loader', options: { presets: ['env'] } }
  };
});