巴贝尔装载机不适合的WebPack-dev的服务器工作(babel-loader doesn'

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的服务器 ，在index.js源代码不会被transpiled到ES5.In换句话说，巴贝尔装载机只有作品时的WebPack，但不是的WebPack-DEV-服务器 。

为什么？

Answer 1:

听起来像是你错过了巴贝尔寄存器。

$ npm i --save-dev babel-register和添加require('babel-register'); 你的入口文件（最顶部index.js ）。

看到类似的问题在这里： 制作与巴贝尔，和的WebPack Node.js的出口默认工作

Answer 2:

如果你喜欢添加脚本"dev": "webpack-dev-server" ，然后用执行它npm run dev或类似的，它将执行webpack-dev-server在项目的本地安装node_modules 。

但如果你忘了将它添加到你的项目的依赖，而你由于某种原因，有一个全球的装机量webpack-dev-server ，它会运行 ，而不是。

这导致了原来的问题，我所描述的混乱。 溶液，因此，安装webpack-dev-server在我的项目与npm install --save-dev webpack-dev-server 。

文章来源: babel-loader doesn't work for webpack-dev-server