babel-loader对于webpack-dev-server不起作用 [英] babel-loader doesn't work for webpack-dev-server

问题描述

var path = require("path");
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "./built/"),
        publicPath: "/built/"
    },
    plugins: [],
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader"
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                }
            }
        ]
    }
};

使用上述配置，如果我运行 webpack ，它将获得正确的结果，但是如果我运行 webpack-dev-server ，则索引中的源代码.js不会被移植到ES5.换句话说，babel-loader仅在 webpack 时有效，而在 webpack-dev-server 上无效.

With the above configuration,if I run webpack,it will get a correct result,but if I run webpack-dev-server,the source code in index.js will not been transpiled to ES5.In other words,babel-loader only works when webpack,but not webpack-dev-server.

为什么?

推荐答案

听起来像您缺少babel-register.

Sounds like you're missing babel-register.

$ npm i --save-dev babel-register 并将 require('babel-register'); 添加到条目文件的最顶部( index.js ).

$ npm i --save-dev babel-register and add require('babel-register'); to the very top of your entry file (index.js).

在这里看到类似的问题:使用Babel，webpack和Node.js进行导出默认工作

See similar issue here: Making export default work with Babel, webpack and Node.js

这篇关于babel-loader对于webpack-dev-server不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！