Webpack：为什么 vue-loader 不能转译？答案

【问题标题】：Webpack: Why does vue-loader not transpile?Webpack：为什么 vue-loader 不能转译？
【发布时间】：2019-02-05 23:57:36
【问题描述】：

我正在使用 vue-loader V14 和 Webpack 3.12。在 vue-loader 文档中说 javascript 将使用 babel-loader 自动转译，但是当我查看输出时我仍然看到 ES6，例如：

data() {
    return {
        current: ''
    };
},

这是 webpack 配置的（相关部分）：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
},
module: {
    rules : [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        },
        {
            test: /\.vue$/,
            use: 'vue-loader'
        }
    ]
}

我尝试将vue$ 别名设置为指向vue.common.js 版本。

我做错了什么？

更新：这是我为 vue-loader 规则尝试的另一个配置：

{
    test: /\.vue$/, 
    loader: "vue-loader",
    options: {
        loaders: { js: 'babel-loader' }
    }
}

【问题讨论】：

根据 OP，vue-loader V14，它没有插件，AFAIK。
您可能正在阅读更新版本的 vue-loader 的文档。对于 V14，您的配置将不起作用，您需要在 vue-loader 的 js 文件选项中显式列出 babel-loader。 This 是 V15 中的更改方式。
@DecadeMoon，我试过了（根据上面的更新）。仍然没有快乐。
必须是{ options: { loaders: { js: 'babel-loader' } } }。
@DecadeMoon，是的，我发现并修复了它。（现在在上面的代码中更新）。仍然没有喜悦。真是难以置信，竟然这么难！

标签： vue.js webpack vue-loader

【解决方案1】：

我必须在.babelrc中设置这个预设

"presets": [
    ["env", { "modules": "commonjs" }]
],

【讨论】：