Question

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 中使用。

为什么？

Answer 1

听起来你错过了babel-register。

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

在此处查看类似问题： Making export default work with Babel, webpack and 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对webpack-dev-server不起作用

2 个答案: