Question

我正在使用Symfony Encore为我的项目配置Webpack。到目前为止，我已经启用vue-loader了，没有任何问题，但是在将选项传递到vue-loader时遇到了麻烦，因为文档对我来说还不够清楚，无法在那里传递或配置任何选项。

我想知道是否有人尝试这样做，以及如何正确完成。

到目前为止，我仅启用了vue-loader。

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')

Answer 1

首先，您可能不应将vue-loader@15.0+用作Encore doesn't support it yet（因此，也不应在Encore配置中添加addPlugin(new VueLoaderPlugin())行）。

第二，您可以通过以下方式配置Babel：

保持原样。 Encore为Babel设置了非常合理的默认值（如果启用了vue-loader，则会自动配置）：env预设与>1%浏览器覆盖率的目标一起使用。
Adding .babelrc configuration file to project folder。
```
{
    presets: ['env']
}
```

Using Babel-specific configuration callback, provided by Encore：

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

By options callback for vue-plugin configuration（不太可取，因为它会与Encore自己执行的Babel的内部配置相冲突。如果想要对vue文件进行独立配置，它可能还是有用的）：
```
.enableVueLoader(function(options) {
  options.loaders = {
    js: { loader: 'babel-loader', options: { presets: ['env'] } }
  };
});
```

在vue-loader中配置Babel（Symfony Encore）

1 个答案: